如何向React组件传递props以修改内部h3标签的文本颜色？

问题原因 #

• 第一次写法不生效：你传递的style属性是给到Subheader组件根元素的，组件内部没有将这个属性绑定到内部的h3标签上，所以样式不生效。
• 第二次写法不生效：运算符优先级问题，字符串拼接+的优先级高于三元运算符? :，你写的代码实际会先拼接styles.h3 + " " + props.lightText，得到的非空字符串为真值，所以三元运算永远返回styles.lightText，导致styles.h3类丢失、所有实例都显示浅色。

正确实现方式 #

方案1：修复运算符优先级问题（最快捷） #

修改组件的className拼接逻辑，用ES6模板字符串避免优先级问题，原有CSS无需改动：

// other imports
import styles from "./styles/subheader.module.css"

export default function Subheader(props) {
  return (
    <Container>
      <h3 className={`${styles.h3} ${props.lightText ? styles.lightText : styles.darkText}`}>{props.text}</h3>
      <div className={styles.headerUnderline}></div>
    </Container>
  )
}

使用方式保持你原有写法即可，即可正常区分深浅色、同时保留居中、字号等原有基础样式。

方案2：支持自定义样式透传（更灵活） #

如果需要适配更多自定义样式场景，可以做属性透传，兼容直接传style的写法：

export default function Subheader(props) {
  const { text, lightText, h3Props, ...containerProps } = props
  return (
    <Container {...containerProps}>
      <h3 
        className={`${styles.h3} ${lightText ? styles.lightText : styles.darkText}`}
        {...h3Props}
      >
        {text}
      </h3>
      <div className={styles.headerUnderline}></div>
    </Container>
  )
}

使用时可以直接传自定义样式覆盖默认配置：

<Subheader 
  text="PRODUCTS" 
  h3Props={{style: {color: "rgb(219, 190, 157)"}}} 
/>

内容的提问来源于stack exchange，提问作者eoja