A familiar and performant
compile time CSS-in-JS library for React.
/** @jsxImportSource @compiled/react */
import { css } from '@compiled/react';
const buttonStyles = css({
border: 'none',
borderRadius: '3px',
padding: '8px 10px',
backgroundColor: '#6554C0',
color: '#fff',
fontWeight: 400,
fontFamily: 'Arial',
fontSize: '14px',
'&:hover': {
backgroundColor: '#8777D9',
},
'&:active': {
backgroundColor: '#5243AA',
},
});
export const Button = ({ children }) => {
return (
<button type="button" css={buttonStyles}>
{children}
</button>
);
};
/* css-prop-button.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _13 = '._1di6vctu:active{background-color:#5243aa}';
const _12 = '._irr3mlcl:hover{background-color:#8777d9}';
const _11 = '._1wybdlk8{font-size:14px}';
const _10 = '._ect41ttw{font-family:Arial}';
const _9 = '._k48p1nn1{font-weight:400}';
const _8 = '._syazu67f{color:#fff}';
const _7 = '._bfhk1mzw{background-color:#6554c0}';
const _6 = '._19bv19bv{padding-left:10px}';
const _5 = '._n3tdftgi{padding-bottom:8px}';
const _4 = '._u5f319bv{padding-right:10px}';
const _3 = '._ca0qftgi{padding-top:8px}';
const _2 = '._2rko1l7b{border-radius:3px}';
const _ = '._19itglyw{border:none}';
const buttonStyles = null;
export const Button = ({ children }) => {
return (
<CC>
<CS>{[_, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13]}</CS>
{
<button
type="button"
className={ax([
'_19itglyw _2rko1l7b _ca0qftgi _u5f319bv _n3tdftgi _19bv19bv _bfhk1mzw _syazu67f _k48p1nn1 _ect41ttw _1wybdlk8 _irr3mlcl _1di6vctu',
])}>
{children}
</button>
}
</CC>
);
};
<Button>Button</Button>
Performant, comfortable CSS-in-JS
Using APIs and behavior you may already be familiar with, write your styles in JavaScript with the full power of CSS — leveraging the language to create expressive and dynamic experiences.
This requires some installation to work, head over to the documentation to get started.
For a peek under the hood, see how it works.
- Basic usage:
/** @jsxImportSource @compiled/react */
import { css } from '@compiled/react';
const largeTextStyles = css({ fontSize: '48px', padding: '8px', background: '#eee' });
const invertedStyles = css({ background: '#333', color: '#fff' });
export const LargeText = ({ inverted, children }) => {
return <span css={[largeTextStyles, inverted && invertedStyles]}>{children}</span>;
};
<LargeText>Hello</LargeText>
<LargeText inverted>world</LargeText>
- Would render as:
Getting started
Installation