Package used to integrate CSS onto javascript.
npm install react-cascading-style-sheets
StyleSheet
styles.css file for styles except if you want to select tags overall or do animations. Also, it supports typescript, commonJS (To be honest, i don't think you'll ever use CommonJS in a react project), and Modules.
js
import { CascadingStyleSheet } from "react-cascading-style-sheets";
export default function App() {
const Style1 = new CascadingStyleSheet({
color: "blue",
});
const Style2 = new CascadingStyleSheet({
backgroundColor: "white",
});
return (
<>
Hello world!
reactCSS made the styles on this page.
>
);
}
`
Or, if you want to edit just one thing:
`js
import { styling } from "react-cascading-style-sheets";
export default function App() {
return (
<>
>
);
}
`
Where to use it
reactCSS currently works with react and react-dom. In this case, webpages. A better option to use for react-native styling is the package itself.
How does reactCSS even work?
Might be how you expected it. It basically turns something like this:
`js
const styles = new StyleSheet({
color: "blue",
});
`
to something like this:
`js
const styles = {
color: "blue",
};
`
$3
With reactCSS, all of our settings are converted into kebab-case after turning it into a object.
For example, we would turn backgroundColor into background-color`.