[Solved] React - Subcomponents not inheriting CSS?

[Solved] React - Subcomponents not inheriting CSS?
0.0 0

#1

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.


#2

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.


#3

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!