Skip to content
New issue

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 的 CSS in JS 方案 #36

Open
yinxin630 opened this issue Jul 13, 2020 · 0 comments
Open

基于 linaria 的 CSS in JS 方案 #36

yinxin630 opened this issue Jul 13, 2020 · 0 comments
Labels

Comments

@yinxin630
Copy link
Owner

yinxin630 commented Jul 13, 2020

linaria 可以实现在 JS 中写 CSS, 它是将样式写在模板字符串中赋值给常量, 并通过 babel 插件将其直接编译为静态 css 样式, 常量值即是样式的 class 名, 在 react 中可以直接传递给 className props 来应用样式, 十分方便

优势

  • 常量名即样式 class 名, 对编辑器友好, 比如设置 className 属性时可以补全, cmd + 点击跳转到样式定义位置
  • 常量可以 export 出去, 便于其它组件对其覆盖样式
  • 类似 less / sass 的写法, 学习成本低
  • 组件的样式和逻辑只需要一个文件即可, 便于维护

如何配置

如果你是直接使用的 webpack / rollup 等构建工具, 按照官方 Steup 配置即可

如果你用的是 create-react-app, 推荐使用 cracocraco-linaria

编辑器配置

如果你是 VSCode, 推荐安装 vscode-styled-components 插件, 支持样式补全
image

用法

基础用法

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>
    );
}

Media Query

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant