Movatterモバイル変換

styled-components/xstyledPublic

NotificationsYou must be signed in to change notification settings
Fork105
Star2.3k

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️

xstyled.dev

License

MIT license

2.3k stars 105 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 653 Commits
.github		.github
.yarn		.yarn
benchmarks		benchmarks
build		build
packages		packages
resources		resources
website		website
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.yarnrc.yml		.yarnrc.yml
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
jest.config.js		jest.config.js
lerna.json		lerna.json
netlify.toml		netlify.toml
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

A utility-first CSS-in-JS framework built for React.

npm install @xstyled/styled-components styled-components

Docs

See the documentation atxstyled.dev for more information about using xstyled!

Quicklinks to some of the most-visited pages:

Example

import{x}from'@xstyled/styled-components'functionExample(){return(<x.divp={{_:3,md:6}}bg="white"display="flex"spaceX={4}><x.divflexShrink={0}><x.imgh={12}w={12}src="/img/logo.svg"alt="xstyled Logo"/></x.div><x.div><x.h4fontSize={{_:'md',lg:'xl'}}fontWeight="medium"color="black">          xstyled</x.h4><x.pcolor="gray-500">A CSS-in-JS framework built for React.</x.p></x.div></x.div>)}