react-lit-css
Small library with a React hook and utils for component styling with tagged template literals
Demo: https://codesandbox.io/s/lit-css-jzgzy
Usage
First install it with npm
or yarn
:
$ npm install --save react-lit-css
Then use it in your React components. Import the css
tagged template function (which is also a hook) and write CSS with it. It returns an unique className
with scoped CSS rules. Note that if you want to apply the class rules, you have to specify the :host
pseudo-selector:
import React from 'react'import css from 'react-lit-css' { const rootClass = css` :host { background-color: #001D7F; border-radius: 12px; padding: 16px; } :host span { font-size: 24px; font-weight: bold; color: #FFF; } ` return <div => <span> Hello React Lit CSS </span> </div> }
If you use VSCode, you can install the vscode-styled-components plugin for CSS syntax highlight.
Under the hood, it only replaces all occurences of :host
by the className
in the CSS literal, injecting it into a style
HTML Element and appending it to the DOM. Note that it also invokes a effect hook that watches the CSS literal, and updates its style
element when changed.
You can even create an object with several rules:
const classes = container: css` :host { background-color: #001D7F; border-radius: 12px; padding: 16px; } ` content: css` :host { font-size: 24px; font-weight: bold; color: #FFF; } ` return <div => <span => Hello React Lit CSS </span> </div>
Other pseudo-selectors as well as media queries are also supported. Animation keyframes are also scoped:
const rootClass = css` @keyframes fade-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0px); } } :host { background-color: #001D7F; border-radius: 12px; padding: 16px; animation-name: fade-in; animation-duration: 300ms; } :host:hover { background-color: #FFF; } :host:hover span { background-color: #000; } :host span { font-size: 24px; font-weight: bold; color: #FFF; } @media (max-width: 400px) { :host span { font-size: 18px; } }`