https://github.com/mozzius/stylish-sheets
A CSS-in-JS solution
https://github.com/mozzius/stylish-sheets
Last synced: 4 months ago
JSON representation
A CSS-in-JS solution
- Host: GitHub
- URL: https://github.com/mozzius/stylish-sheets
- Owner: mozzius
- Created: 2020-03-21T04:19:29.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-03-18T14:58:27.000Z (about 5 years ago)
- Last Synced: 2025-12-27T04:54:45.741Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# stylish-sheets
A better CSS-in-JS solution for React
- Super lightweight, only one dependency
- Simple API (CSS in tagged function -> classnames)
- Supports SCSS-like syntax and theming
## Installation
```bash
yarn add stylish-sheets
```
## Example
### Simple component
```javascript
import React, { useState } from "react";
import useStyle from "stylish-sheets";
export const Title = () => {
const [toggle, setToggle] = useState(true);
const classes = useStyle`
.title {
color: ${toggle ? "red" : "blue"};
font-weight: bold;
font-size: 25px;
}
`;
return (
setToggle((t) => !t)}>
Hello World!
);
};
```
### Themes
If you pass `useStyle` a function, it will pass it a theme object that is stored using React's Context API.
In this example, we get the color of the title from the theme that is set using `ThemeProvider`.
```javascript
import React from "react";
import useStyle from "stylish-sheets";
export const Title = () => {
const classes = useStyle`
.title {
color: ${(theme) => theme.color};
font-weight: bold;
font-size: 25px;
}
`;
return
Hello World!
;
};
```
Then in some component higher up the tree:
```javascript
import React from 'react';
import { ThemeProvider } from 'stylish-sheets';
import { Title } from './title';
export const App = () => (
)
```
[Read more about the Context API here](https://reactjs.org/docs/hooks-reference.html#usecontext)