We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
linaria 可以实现在 JS 中写 CSS, 它是将样式写在模板字符串中赋值给常量, 并通过 babel 插件将其直接编译为静态 css 样式, 常量值即是样式的 class 名, 在 react 中可以直接传递给 className props 来应用样式, 十分方便
className
如果你是直接使用的 webpack / rollup 等构建工具, 按照官方 Steup 配置即可
如果你用的是 create-react-app, 推荐使用 craco 和 craco-linaria
如果你是 VSCode, 推荐安装 vscode-styled-components 插件, 支持样式补全
vscode-styled-components
const text = css` color: red; font-size: 20px; `; function App() { return ( <div> <p className={text}>应用样式</p> </div> ); }
const text = css` color: red; font-size: 20px; `; const container = css` .${text} { color: blue; }; `; function App() { return ( <div> <p className={text}>应用样式</p> <div className={container}> <p className={text}>子元素选择器</p> </div> </div> ); }
const li = css` color: red; &:hover { color: blue; } &:nth-child(2n + 1) { background-color: black; } `; function App() { return ( <div> <ul> {['111', '222', '333'].map((str) => ( <li className={li}>{str}</li> ))} </ul> </div> ); }
const diamonds = css` width: 200px; height: 200px; background-color: red; animation: spin 2s infinite linear; @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } `; function App() { return ( <div> <div className={diamonds}></div> </div> ); }
const diamonds = css` width: 200px; height: 200px; background-color: red; @media (min-width: 1000px) { width: 400px; height: 400px; } `; function App() { return ( <div> <div className={diamonds}></div> </div> ); }
css` :global() { body { background-color: red; } p { color: blue; font-size: 22px; } } `; function App() { return ( <div> <p>全局样式</p> </div> ); }
更多用法请参考 https://github.com/callstack/linaria/blob/master/docs/BASICS.md
The text was updated successfully, but these errors were encountered:
No branches or pull requests
linaria 可以实现在 JS 中写 CSS, 它是将样式写在模板字符串中赋值给常量, 并通过 babel 插件将其直接编译为静态 css 样式, 常量值即是样式的 class 名, 在 react 中可以直接传递给
className
props 来应用样式, 十分方便优势
如何配置
如果你是直接使用的 webpack / rollup 等构建工具, 按照官方 Steup 配置即可
如果你用的是 create-react-app, 推荐使用 craco 和 craco-linaria
编辑器配置
如果你是 VSCode, 推荐安装
vscode-styled-components
插件, 支持样式补全用法
基础用法
子元素选择器
伪类
动画
Media Query
全局样式
其它
更多用法请参考 https://github.com/callstack/linaria/blob/master/docs/BASICS.md
The text was updated successfully, but these errors were encountered: