react-inline-css alternatives and similar libraries
Based on the "CSS / Style" category.
Alternatively, view react-inline-css alternatives based on common mentions on social networks and blogs.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress π -
classnames
A simple javascript utility for conditionally joining classNames together -
stitches
CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience. -
react-responsive
CSS media queries in react - for responsive design, and more. -
aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
react-css-modules
Seamless mapping of class names to CSS modules inside of React components. -
react-container-query
:package: Modular responsive component -
react-css-components
Define React presentational components with CSS -
postcss-js
PostCSS for React Inline Styles, Free Style and other CSS-in-JS -
react-look
Advanced & Dynamic Component Styling for React and React Native. Ships with powerful Plugins, Mixins and Developer Tools. -
inline-style-prefixer
Autoprefixer for JavaScript style objects -
stilr
Encapsulated styling for your javascript components with all the power of javascript and CSS combined. -
aesthetic
π¨ Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more! -
paperclip
Write durable HTML & CSS for any kind of web application [Moved to: https://github.com/paperclip-ui/paperclip] -
reactponsive
Responsive components and Hooks β for your favorite framework βοΈ
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-inline-css or a related project?
README
React Inline CSS
Make your React components visually predictable. React Inline CSS allows you to write traditional CSS stylesheets in your components, automatically namespacing them for you.
Inspired by the SUIT CSS methodology.
Demo
Example
You write:
var Profile = React.createClass({
render: function () {
return (
<InlineCss stylesheet={`
& .card {
cursor: pointer;
margin: 15px;
padding: 15px;
text-align: center;
height: 200px;
}
& img {
width: 130px;
height: 130px;
}
& p {
margin: 10px;
}
`}>
<div className="card">
<img src="mao.jpg" />
<p>Mao</p>
</div>
</InlineCss>
);
}
});
You get namespaced CSS that works on sub-components (comparable to HTML5 <style scoped>
):
<div id="InlineCss-1">
<div class="card">
<img src="mao.jpg">
<p>Mao</p>
</div>
<style>
#InlineCss-1 .card {
cursor: pointer;
margin: 15px;
padding: 15px;
text-align: center;
height: 200px;
}
#InlineCss-1 img {
width: 130px;
height: 130px;
}
#InlineCss-1 p {
margin: 10px;
}
</style>
</div>
For a cascaded effect, see the index.html
demo.
Installation
npm install --save react-inline-css react
Usage
Run npm run watch
in your terminal and play with example/
to get a feel of react-inline-css.
SASS / LESS
You can override the &
as the selector to the current component. This is useful if you want to require precompiled stylesheets from an external file. Here's an example with SASS loader for Webpack:
UserComponent.js
import React from "react";
import InlineCss from "react-inline-css";
const stylesheet = require("!raw!sass!./UserComponent.scss");
class UserComponent extends React.Component {
render () {
return (
<InlineCss componentName="UserComponent" stylesheet={stylesheet}>
<div className="facebook">Mao is no longer red!</div>
<div className="google">Mao is no longer red!</div>
<div className="twitter">Mao is no longer red!</div>
</InlineCss>
);
}
};
UserComponent.scss
UserComponent {
color: red;
.facebook {
color: blue;
}
.google {
color: blue;
}
.twitter {
color: green;
}
}
result
Community
Let's start one together! After you β Star this project, follow me @Rygu on Twitter.
Contributors
License
BSD 3-Clause license. Copyright Β© 2015, Rick Wong. All rights reserved.
*Note that all licence references and agreements mentioned in the react-inline-css README section above
are relevant to that project's source code only.