How to pass props to react component to change text color

Question

I have a react component that has an h3 with dark gray text color. I would like to reuse the component in a place where the background color is also dark gray, so I need to change the h3 text color to something lighter.

This is how the component was before I needed to change the text color in some areas:

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

I tried this which didn't work:

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

So I tried passing props and changed my component:

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

And changed 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);
}

And used like:

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

But that didn't work either.

Thanks, I corrected that, it was a typo in copy and pasting to ask the question. Trying to inline style there still doesn't work. — eoja, Nov 09 '21 at 20:52
How are you importing your css to react? you either need to include it as a var or const in the function and use it or include you css file with(example): import styles from './my-style.module.css'; <- something like this... have you done it? if you use that line for example then the code from your first try should work... because of the use of styles... just change the filename to what you need fit. — Shlomtzion, Nov 09 '21 at 21:07
@Shlomtzion I import it with 'import styles from "./styles/subheader.module.css"'. I edited my post to show. The CSS works just fine. The h3 text color in the Subheader component is dark grey and that renders just fine. What I'm trying to figure out is how to change the Subheader text color to a light color when used with a dark backgound. — eoja, Nov 09 '21 at 21:22

score 2 · Answer 1 · answered Nov 09 '21 at 21:53

You can use style prop like you did here:

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

But notice that you're not passing the style prop to an element, but to a component, so, like text, it can be accessed inside the component on the props object (i.e. props.style).

This how you can access style:

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

Live example: Code Sandbox

drazewski · Accepted Answer · 2021-11-09T21:49:24.733

1

It will work if you change your h3 className to template string:

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

or at least last part of it:

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

Here you can find a lot of great examples how to add multiple classnames: How to add multiple classes to a ReactJS Component?

edited Nov 09 '21 at 21:49

answered Nov 09 '21 at 21:44

drazewski

1,739
1
19
21

1

Just a note the second part not being one template string is better as:
{props.text}
Otherwise there will be a warning about "no-useless-concat". – eoja Nov 09 '21 at 22:26

How to pass props to react component to change text color

2 Answers2

{props.text}