5 ms·
What about just importing the css file from your component file? For example, in MyComponent.js, you have: import './MyComponent.css'; const MyComponen
by akawry 9y ago
What about just importing the css file from your component file?
For example, in MyComponent.js, you have:
import './MyComponent.css';
const MyComponent = () => (
<div className="my-class">I'm a component!</div>
);
and in MyComponent.css,
.my-class {
color: red;
}
To handle proper scoping, you could use something like css-modules or wrap each component in a top-level <div> with a component-specific class name. For example:
const MyComponent = () => (
<div className="MyComponent">
<div className="content">
I'm a component
</div>
</div>
);
and then
.MyComponent.content {
color: red;
}
If you use a preprocessor like sass, you can just nest your entire component-specific styles like this:
.MyComponent
.content
color: red
.footer
color: blue
- MunGell 9y agoI use this approach in most cases combining it with BEM class naming. However, the point of having single-file components it to have all the required code in one file, including CSS/styling.