如何将道具传递给反应组件以更改文本颜色

Question

我有一个 h3 带有深灰色文本颜色的 React 组件。我想在背景颜色也是深灰色的地方重复使用该组件，所以我需要将 h3 文本颜色更改为更亮的颜色。

在我需要更改某些区域的文本颜色之前，组件是这样的：

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

export default function Subheader(props) {
  return (
    <Container>
      <h3 className={styles.h3}>{props.text}</h3>
      <div className={styles.headerUnderline}></div>
    </Container>
  )
}

CSS:

.h3 {
  font-family: var(--font-family);
  font-size: var(--h3-font-size);
  text-align: center;
  color: rgb(33, 37, 41);
  margin-top: 2rem;
}
.headerUnderline {
  width: 100px;
  height: 4px;
  background-color: rgb(219, 190, 157);
  margin: 0 auto;
  border-radius: 2px;
  margin-bottom: 2rem;
}

我试过这个没有用：

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

所以我尝试传递道具并更改我的组件：

//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>
  )
}

并更改为CSS：

.h3 {
  font-family: var(--font-family);
  font-size: var(--h3-font-size);
  text-align: center;
  margin-top: 2rem;
}
.lightText {
  color: rgb(219, 190, 157);
}
.darkText {
  color: rgb(33, 37, 41);
}

并像这样使用：

// both render light text with no .h3 styling like centered text
<Subheader text="WE DELIVER" lightText={true} />
<Subheader text="PRODUCTS" lightText={false} />

但这也没有用。

Answer 1

如果您将 h3 className 更改为模板字符串，它将起作用：

<h3 className={`${styles.h3} ${props.lightText ? styles.lightText : styles.darkText}`}>{props.text}</h3>

或至少最后一部分：

<h3 className={styles.h3 + " " + `${props.lightText ? styles.lightText : styles.darkText}`}>{props.text}</h3>

在这里你可以找到很多如何添加多个类名的好例子：

Answer 2

您可以像这里一样使用 style 道具：

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

但请注意，您没有将 style 道具传递给元素，而是传递给组件，因此，与 text 一样，它可以在 [=15] 上的组件内部访问=] 对象（即 props.style）。

这是您访问 style 的方式：

export default function Subheader(props) {
  return (
    <Container>
      <h3 style={props.style} className={styles.h3}>{props.text}</h3>
      <div className={styles.headerUnderline}></div>
    </Container>
  )
}

实例：Code Sandbox

如何将道具传递给反应组件以更改文本颜色

How to pass props to react component to change text color

css

reactjs

react-bootstrap

react-props