Styled System
Responsive, theme-based style props for building design systems with React https://styled-system.com
npm i styled-system
Features
- Add style props that hook into your own theme
- Quickly set responsive font-size, margin, padding, width, and more with props
- Influenced by constraint-based design system principles
- Typographic scale
- Spacing scale for margin and padding
- Works with any color palette
- Works with most css-in-js libraries, including styled-components & emotion
- Used in Rebass, Reflexbox, and the Priceline Design System
"This is honestly my favourite way to build UI components right now
"
"If you haven't seen Styled System before, do yourself a favour and check it out. It's been a huge influence in my thinking on component-oriented styles."
"The future of css-in-js is going to look something like styled-system with its responsive values."
"Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for."
"If you make websites/apps with React check out Styled System if you haven't already. You will be amazed at how much faster you can build."
"If you like Tachyons you will love styled-system. If you don't like Tachyons, you will love styled-system."
"Styled System is one of the best libraries I have ever used."
Try It Out
Try the examples on CodeSandbox
Table of Contents
Usage
// Example uses styled-components, but styled-system works with most other css-in-js libraries as well
import styled from 'styled-components'
import { space, layout, typography, color } from 'styled-system'
// Add styled-system functions to your component
const Box = styled.div`
${space}
${layout}
${typography}
${color}
`
Each style function exposes its own set of component props that handle styles based on values defined in a theme.
// width: 50%
<Box width={1/2} />
// font-size: 20px (theme.fontSizes[4])
<Box fontSize={4} />
// margin: 16px (theme.space[2])
<Box m={2} />
// padding: 32px (theme.space[3])
<Box p={3} />
// color
<Box color='tomato' />
// color: #333 (theme.colors.gray[0])
<Box color='gray.0' />
// background color
<Box bg='tomato' />
Responsive Style Props
Set responsive width, margin, padding, font-size, and other properties with a shorthand array syntax. Read more
// responsive width
<Box width={[ 1, 1/2, 1/4 ]} />
// responsive font-size
<Box fontSize={[ 2, 3, 4 ]} />
// responsive margin
<Box m={[ 1, 2, 3 ]} />
// responsive padding
<Box p={[ 1, 2, 3 ]} />
To learn more, see the Getting Started guide or read the docs.
Docs
- Getting Started
- Responsive Styles
- How it Works
- Custom Props
- Variants
- API
- Reference Table
- Packages
- Guides
- @styled-system/css
Further Reading
- Component Based Design System With Styled-System
- Build Better Component Libraries with Styled System
- Building a beautiful, reusable button with Styled System
- Defining Component APIs in React
- The Three Tenets of Styled System
Built with Styled System
- Primer Components
- Priceline Design System
- Cloudflare Design Color
- Styled System HTML
- Rebass
- Reflexbox
- @datepicker-react/styled
Is the project abandoned?
I was just looking at the release frequency, current issues, pending pull request, and overall activity as of late; and considering that I myself am experiencing some of the issues already reported, it is hard to not think the case. So, is the project abandoned?
v5 Roadmap
This is a WIP issue to track potential changes for the next major version.
propTypes
from corepropTypes
variants
packagepropTypes
packagethemeGet
, etcsizes
key per the Theme Specificationcss
and/or JSX pragma packages into monoreposhould-forward-prop
package into monorepoNotes
cc @neoziro
Improve performances
Following #444, I bring perf improvements from @smooth-ui/system into styled-system. The goal is to make this library the best one and the universal one.
What has changed?
What are the breaking changes?
0
if you want it to beBenchmarks
I added a benchmark in the project, the result:
Any way to create a complex `style` or a responsive `variant`?
My use case is as follows: I need to make a form label 'visually hidden' on some screens, and visible on others. For accessibility this cannot be a simple
display: none
and it needs to apply a several styles.Using custom
style
declarations, this might be possible, although it would not be neat as it would require binding a bunch of different properties to the same prop.Using custom
variant
keys there doesn't seem to be a way to access breakpoints.Is there some combination of the two that would work? Ideally it would look something like:
change to use objects instead of strings
Hi there! I saw this and love it. Naturally I wanted to see whether it works with glamorous and found that it almost does except it returns strings rather than objects. Turns out that styled-components can accept objects as well as strings! This is what
polished
does and you can usepolished
with styled-components or any other CSS-in-JS library.Here's a start to making it work with objects. It's a work in progress. I've just updated the
fontSize
util. I've published these changes as@kentcdodds/styled-system
and verified that it works with both glamorous and styled-components here.If you're ok with this kind of change, I will be happy to update the pull request to apply to the other utils 👍
Support for React Native?
Encountering the following error when trying to import
styled-system
in a project utilizingstyled-components/native
:Is this a known issue? I didn't see any mention of RN support, and didn't know if you were planning on supporting it or not. Let me know if there's any other info you'd like to see.
Custom breakpoints not working
I am trying to change the default value but it is not working :(
"styled-system": "^5.1.0"
Overriding Default Values in Styled-System Variants
NOTE: I am referencing the following functionality in styled-system: https://styled-system.com/api#variants
I have the following buttons variant in my
theme.js
file:This gives a nice, default styling for a flat button. However, there will be times that I want to override the default color. Say, something like this:
<Button variant="flat" color="primary">Flat Button</Button>
However, this does not work -- because (if I understand correctly), one cannot use props with variants (is that correct?). If so, I am wondering if there is a way override the styling for
variant="flat"
on a case-by-case basis?fontSize prop renders to font-size attribute
When using
${fontSize}
function in my custom component, such asReact apparently treats is as HTML attribute and renders it as
font-size
on the respective tag.What can be done to override / circumvent this behavior
Most performant way to write styled-system components
Just a heads up - Asking existential questions, no bug report following
With v5 comes a few interesting changes to the styled-system API. As I make my way through the source code, I still can't quite figure out the best way to write a component using styled-system. I had the same issue with styled-system 4 when writing my most recent UI library based on styled-system. While I understand there are many different ways to write the same component (it appears you've left it intentionally open-ended, which I appreciate), I'm concerned primarily about performance and bundle size. I would love any pointers in the appropriate direction as possible.
Assuming I have a base
Box
component (similar or identical to the one in Rebass) that I want to extend in some way, I could do any of the following:1. Extend a component via
css
2. Create a new component via
styled
3. Create a new component via
styled
andcss
4. Write in the
style
prop on the componentLikewise, if I want to create a component with identical styles as
Box
, but with a different name (for readability sake) then I could do something like:themeGet()
as a method of getting theme values if it's way longer and does the same functionality ascss()
but without responsive arrays? This method seems pretty unuseful, although I admit to using it a lot when I first started on styled-system because I didn't know better. Are fallback values the only thing I'm given fromthemeGet()
that I don't get withcss()
?compose
-ing all of our style functions together for better performance.I don't have a question on the above point, but was hoping you could elaborate.
Perhaps I'm a bit more partial to being instructed on the "best practices" of using a component library. However, I also know there's not a "one size fits all" answer for any of these questions. I was curious if you or anyone else have any real-world examples of where one method of creating components has been better (read "more maintainable", "cleaner", or "more performant") than another. Perhaps I'm asking in the wrong project as well, and should instead pose this to the
styled-components
oremotion
community instead.Thanks for everything, I love what you're doing on this project - I'm looking to help contribute wherever I can!
Support for breakpoint maps (objects)?
Hi,
I like the terseness of current responsive array syntax but in some situations I think it would be nice to provide breakpoint maps as well as arrays. For example, where you have a lot of breakpoints to avoid so many
null
values, or where you may need to insert new breakpoints.Example:
Becomes:
Where
theme.breakpoints
is no longer an array but something like{ def: 0, xs: '32em', sm: '40em', md: '56em', lg: '64em', xl: '80em' }
.That's what this PR introduces, in what is (at least according to the tests) a non-breaking way, as well as moving some duplicated code to shared function
getStyles
.I figure you may well have considered and dismissed it from an API design perspective. But I'm going to use it in the fork, so just thought I'd share back 😄 .
I can remove the breakpoint map changes if you are interested in some of the lightweight refactoring / removal of duplication between the
style
andspace
functions.Bump express from 4.17.1 to 4.18.2 in /examples/emotion
Bumps express from 4.17.1 to 4.18.2.
Release notes
Sourced from express's releases.
... (truncated)
Changelog
Sourced from express's changelog.
... (truncated)
Commits
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump express from 4.17.1 to 4.18.2
Bumps express from 4.17.1 to 4.18.2.
Release notes
Sourced from express's releases.
... (truncated)
Changelog
Sourced from express's changelog.
... (truncated)
Commits
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump express from 4.17.1 to 4.18.2 in /examples/css
Bumps express from 4.17.1 to 4.18.2.
Release notes
Sourced from express's releases.
... (truncated)
Changelog
Sourced from express's changelog.
... (truncated)
Commits
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump qs from 6.5.2 to 6.5.3 in /examples/css
Bumps qs from 6.5.2 to 6.5.3.
Changelog
Sourced from qs's changelog.
Commits
298bfa5
v6.5.3ed0f5dc
[Fix]parse
: ignore__proto__
keys (#428)691e739
[Robustness]stringify
: avoid relying on a globalundefined
(#427)1072d57
[readme] remove travis badge; add github actions/codecov badges; update URLs12ac1c4
[meta] fix README.md (#399)0338716
[actions] backport actions from main5639c20
Clean up license text so it’s properly detected as BSD-3-Clause51b8a0b
add FUNDING.yml45f6759
[Fix] fix for an impossible situation: when the formatter is called with a no...f814a7f
[Dev Deps] backport from mainDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump qs from 6.5.2 to 6.5.3 in /examples/emotion
Bumps qs from 6.5.2 to 6.5.3.
Changelog
Sourced from qs's changelog.
Commits
298bfa5
v6.5.3ed0f5dc
[Fix]parse
: ignore__proto__
keys (#428)691e739
[Robustness]stringify
: avoid relying on a globalundefined
(#427)1072d57
[readme] remove travis badge; add github actions/codecov badges; update URLs12ac1c4
[meta] fix README.md (#399)0338716
[actions] backport actions from main5639c20
Clean up license text so it’s properly detected as BSD-3-Clause51b8a0b
add FUNDING.yml45f6759
[Fix] fix for an impossible situation: when the formatter is called with a no...f814a7f
[Dev Deps] backport from mainDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump qs from 6.5.2 to 6.5.3
Bumps qs from 6.5.2 to 6.5.3.
Changelog
Sourced from qs's changelog.
Commits
298bfa5
v6.5.3ed0f5dc
[Fix]parse
: ignore__proto__
keys (#428)691e739
[Robustness]stringify
: avoid relying on a globalundefined
(#427)1072d57
[readme] remove travis badge; add github actions/codecov badges; update URLs12ac1c4
[meta] fix README.md (#399)0338716
[actions] backport actions from main5639c20
Clean up license text so it’s properly detected as BSD-3-Clause51b8a0b
add FUNDING.yml45f6759
[Fix] fix for an impossible situation: when the formatter is called with a no...f814a7f
[Dev Deps] backport from mainDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.