Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cssinjs/styled-jss
Styled Components on top of JSS.
https://github.com/cssinjs/styled-jss
css js jss react styled-components styled-jss stylesheets
Last synced: 5 days ago
JSON representation
Styled Components on top of JSS.
- Host: GitHub
- URL: https://github.com/cssinjs/styled-jss
- Owner: cssinjs
- License: mit
- Created: 2017-04-19T12:12:18.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-31T10:10:52.000Z (about 6 years ago)
- Last Synced: 2024-05-11T20:33:33.081Z (9 months ago)
- Topics: css, js, jss, react, styled-components, styled-jss, stylesheets
- Language: JavaScript
- Homepage: http://cssinjs.org/styled-jss
- Size: 290 KB
- Stars: 217
- Watchers: 13
- Forks: 25
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-css-in-js - styled-jss - 在JSS上有样式的组件 (库)
- awesome-list - styled-jss
README
# Styled Components on top of JSS
[](https://travis-ci.org/cssinjs/styled-jss)
[](https://img.shields.io/coveralls/cssinjs/styled-jss/master.svg?branch=master)
[](https://www.npmjs.com/package/styled-jss)
[](https://www.npmjs.com/package/styled-jss)
Styled-JSS implements a styled-primitives interface on top of [JSS](https://github.com/cssinjs/jss). Its API is similar to styled-components but thanks to the JSS core, it supports all features and plugins JSS does. For e.g. you can use full [JSON Syntax](https://github.com/cssinjs/jss/blob/master/docs/json-api.md) inside.
Try it out on [playground](https://codesandbox.io/s/xl89zx8zz4).
## Default styled function
```js
import styled from 'styled-jss'
const Button = styled('button')({
fontSize: 12,
color: (props) => props.theme.textColor
})
// You can also use curried interface this way.
const div = styled('div')
const Container = div({
padding: 20
})
// Composition.
const PrimaryButton = styled(Button)({
color: 'red'
})
// Composition with unstyled React Components too.
const Button = styled(UnstyledButton)({
color: 'blue'
})
// Component Selectors.
const ButtonContainer = styled(Container)({
[`& ${PrimaryButton}`]: {
color: 'green'
}
})
```
## Theming
`styled-jss` has out of the box support for theme customization with the unified [theming](https://github.com/cssinjs/theming) package.
```js
import styled, {ThemeProvider} from 'styled-jss'
const Button = styled('button')(({margin, theme}) => ({
margin,
color: theme.color,
backgroundColor: theme.backgroundColor,
}))
const themes = {
light: {
color: 'black',
backgroundColor: 'yellow',
},
}
const App = () => (
This is themed Button
)
export default App
```
## Composable styles
Example on the [CodeSandbox](https://codesandbox.io/s/y0162p38lv)
You can compose your style-objects and style-functions.
Let's say this is our **mods.js**:
```js
export const theme = ({ theme }) => ({
color: theme.colors.primary,
backgroundColor: theme.colors.secondary,
})
export const font = ({ bold }) => ({
font: {
weight: bold ? 'bold' : 'normal',
family: 'Arial',
},
})
export const size = ({ size = 'm' }) => ({
s: {
fontSize: 12,
lineHeight: 1.2,
},
m: {
fontSize: 16,
lineHeight: 1.5
}
})[size]
export const rounded = ({ rounded }) => rounded && { borderRadius: 5 }
```
Now we can mix them to our **Button** Component:
```js
import styled from 'styled-jss'
import {theme, font, size, rounded} from 'mods'
const Button = styled('button')(
{
border: 0,
padding: [5, 10],
display: 'inline-block',
},
theme,
font,
size,
rounded,
)
export default Button
```
And Usage:
```js
import {ThemeProvider} from 'styled-jss'
import Button from './components/Button'
const theme = {
dark: {
colors: {
primary: 'white',
secondary: 'purple'
}
}
}
export default () => (
normal button
bold button
small button
rounded button
)
```
## Base Style Sheet
Using base Style Sheet we can reuse classes in the render function and inside of a styled component.
```js
import { Styled, injectStyled } from 'styled-jss'
// Base styles, like a regular jss object.
const styled = Styled({
root: {
margin: 10,
'& $baseButton': {
fontSize: 16
}
},
baseButton: {
padding: 10,
'& + &': {
marginLeft: 10
}
}
})
const NormalButton = styled('button')({
composes: '$baseButton',
border: [1, 'solid', 'grey'],
color: 'black'
})
// Composition - same way.
const PrimaryButton = styled(NormalButton)({
color: 'red'
})
// One can use classes AND styled primitives.
const MyComponent = ({classes}) => (
normal button
primary button
)
const MyStyledComponent = injectStyled(styled)(MyComponent)
```
## Custom JSS setup
Styled-JSS uses [jss-preset-default](https://github.com/cssinjs/jss/tree/master/packages/jss-preset-default) by default. You can require `createStyled` function and provide your custom JSS instance.
```js
import { create as createJss } from 'jss'
import vendorPrefixer from 'jss-vendor-prefixer'
import createStyled from 'styled-jss/createStyled'
const jss = createJss()
jss.use(vendorPrefixer())
// Create a custom Styled function, that allows to set BaseStyles.
export const Styled = createStyled(jss)
// Create a custom styled function that allows to create styled components.
const styled = Styled()
export default styled
```
## Install
```sh
npm install --save styled-jss
```
Install peer dependencies `react` and `react-dom` in your project.
## License
MIT