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!