How to add css of Child tag based on parant tag in React?

import React from 'react';
const style = {
    h2 : {
        fontSize: '20px';
        color: 'black';
    } & span: {
       color: 'white';
    }
}
const Main = () => {
    return (
        <h2 style={style}>Hello<span>Test</span></h2> 
   );
}
export default Main;

Note: <span> can be dynamic.
H2 is the parent tag and I applied style in the same tag I want that it will also be applicable to the child tag (<span>)too.

The JSX style property parallels HTML's style attribute. Both style property and attribute only accepts CSS properties. Hence, no selectors, pseudo-elements or pseudo-classes are allowed.

Using the style property

Replace the following:

const style = {
    h2 : {
        fontSize: '20px';
        color: 'black';
    } & span: {
       color: 'white';
    }
}

const Main = () => {
    return (
        <h2 style={style}>Hello<span>Test</span></h2> 
   );
}

With:

const h2Style = {
  fontSize: '20px';
  color: 'black';
}
const spanStyle = {
  color: 'white';
}

const Main = () => {
    return (
        <h2 style={h2Style}>Hello<span style={spanStyle}>Test</span></h2> 
   );
}

Or the more legible:

const styles = {
  h2: {
    fontSize: '20px';
    color: 'black';
  },
  span: {
    color: 'white';
  }
}

const Main = () => {
    return (
        <h2 style={styles.h2}>Hello<span style={styles.span}>Test</span></h2> 
   );
}

However, since you wish to only define the style for the h2 element, we have more options:

CSS / SCSS

Using CSS, on a separate file:

import "./your-css.css";

const Main = () => {
    return (
        <h2 className="title">Hello<span>Test</span></h2> 
   );
}

where, .your-css.css file contains

.title {
  fontSize: '20px';
  color: 'black';
}

.title span {
  color: 'white';
}

Or even, nested (if you use a preprocessor like .scss)

.title {
  fontSize: '20px';
  color: 'black';

  span {
    color: 'white';
  }
}

CSS-in-JS

Thinking of a more "React" solution, we could use CSS-in-JS, like styled-components Read More

import React from 'react';
import styled from 'styled-components';

const Title = styled.h2`
  fontSize: '20px';
  color: 'black';

  span {
    color: 'white';
  }
`;

const Main = () => {
    return (
        <Title>Hello<span>Test</span></Title> 
   );
}

export default Main;