React CSS-in-JS

React CSS-in-JS

CSS-in-JS is a highly popular modern styling approach that powerfully abstracts the CSS logic model strictly down to the component level, rather than managing styles on the document level. Highly favored open-source libraries enabling this include Styled Components and Emotion.

Styled Components Example

import styled from 'styled-components';

const Button = styled.button  background: blue;   color: white;;
const App = () => <Button>Click me</Button>;