Download
Styletron is a universal toolkit for component-oriented styling. It falls into the CSS in JS category. Styletron works great with React but can be used with other frameworks or plain JS as well. Styletron provides styletron-react with some handy React utilities. Styletron processes the style object and creates two atomic classes. The class names are auto-generated. So you don't have to worry about naming methodologies! That's great! What's less great? The generated names are not stable and will change all the time so you should never target them. If you need a stable selector for something as e2e tests, you should add a data-test-id attribute. Since Styletron uses the <style /> tag, you can use media queries and other selectors as well. You could not do that with inline styles! Check Concepts for more information about how classic CSS translates into CSS in JS.
Features
- Styletron generates styles only when absolutely needed
- It dramatically reduces the redundancy of CSS rules
- No extra tooling required
- It doesn't require a specific compiler or bundler setup
- It is the same developer experience as using inline styles but without any drawbacks
- Your styles are written in JavaScript and co-located with your components
Project Samples
