[Solved] React - Subcomponents not inheriting CSS?

Hey guys,

I want <TaskInput /> to inherit color: #FFF in the .App class, but it doesn’t work. It will only change color if I apply color: #FFF directly on .input on <TaskInput />? What am I doing wrong?

class App extends Component {
  render() {
    return (
      <div className="App">
        <i class="material-icons md-light topleft">info_outline</i>
        <i class="material-icons md-light topright">history</i>
        <div className="flex-container">
          <TaskInput className="input" />
        </div>
      </div>
    );
  }
}

You can see all the code here.

This is my first time using create-react-app.. I’m also not sure why there are two CSS files, index.css and App.css by default.

It doesn’t seem to be a React issue—you just simply don’t have any CSS that changes the font colour of the .input class (colour: inhert, for example).

It’s worth noting that React elements are not supposed to take props with the class attribute:

<i class="material-icons md-light topleft">info_outline</i>
<i class="material-icons md-light topright">history</i>

Should instead be:

<i className="material-icons md-light topleft">info_outline</i>
<i className="material-icons md-light topright">history</i>

If I’m not mistaken, importing .css files like how it is set up in create-react-app is a webpack feature; the separate CSS’s lets you better organise your styeles but it should be kept in mind that even if styles are in separate files they are still global.

The CSS that changes the font color is in .App.

.App {
  background: linear-gradient(#fac368, #eb6c52);
  border: 0;
  color: #fff;
  height: 100vh;
}

I don’t understand why <TaskInput /> doesn’t inherit that though, since it’s in the div with the .App. It should inherit it, right?

In this example .App has color: #fff and it’s inherited on the <TaskInput /> subcomponent.

Thanks for catching the syntax mistake on className for the icons.

edit: I didn’t know that the input elements did not inherit styles by default. Manually changing this issue with with input {color: inherit;} solved the issue. Thanks!