react-style-comp
v1.2.3
Published
Locally scoped CSS for React components
Downloads
20
Maintainers
Readme
react-style-comp
Locally scoped CSS for React components
Following "Make everything a component", turn your CSS into a component and gain the advantages of a familiar syntax with componentized style reuse.
- Inline CSS syntax
- Locally scoped styles with element nesting supported
- Dynamic CSS properties with ES6 template literals
- Package styles as a component for reuse
- No build tool or pre-processor needed
Usage
import React from 'react';
import Style from 'react-style-comp';
export default function MyComponent({ bgColor }) {
return (
<div>
<Style>{`
{
border: 2px solid blue;
}
p {
color: red;
background-color: ${bgColor};
}
`}</Style>
<p>Hello World!</p>
</div>
);
}
Install
npm install react-style-comp --save
How does it work?
Each Style
component outputs an HTML style
element with the CSS selectors prefixed with a unique class name. This class name is also added to the parent element of the Style
component.
The usage example above, might produce the following DOM output.
<div class="uid-H1MaV06lZ">
style>
.uid-H1MaV06lZ {
border: 2px solid blue;
}
.uid-H1MaV06lZ p {
color: red;
background-color: inhert;
}
</style>
<p>Hello World!</p>
</div>
Test
npm install
npm test