从父组件(props)和组件本身设置样式

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const color = 'red';

  return (
    <div>
      <ChildComponent color={color} />
    </div>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = (props) => {
  const style = {
    color: props.color,
  };

  return (
    <div style={style}>
      This is a child component with color {props.color}.
    </div>
  );
};

export default ChildComponent;

/* ChildComponent.module.css */
.child {
  color: red;
}

// 子组件
import React from 'react';
import styles from './ChildComponent.module.css';

const ChildComponent = () => {
  return (
    <div className={styles.child}>
      This is a child component with red color.
    </div>
  );
};

export default ChildComponent;