在样式化组件中使用 Ant 设计变量

Posted 2023-03-15

【中文标题】在样式化组件中使用 Ant 设计变量

【英文标题】：Using Ant Design Variables in Styled Components

【发布时间】：2020-04-15 14:37:08

【问题描述】：

我在GatsbyJS 网站内使用Ant Design 和Styled Components。我希望能够在样式化的组件中访问 Ant Design 变量（用Less 编写）。像这样的：

const StyledButton = styled(Button)`
  background-color: @primary-color
`

我做了一些研究，发现两个库可能会有所帮助，但我不知道如何让它们工作（至少不是在 Gatsby 设置中）。这些是库：

https://github.com/michaeltaranto/less-vars-to-js https://github.com/jean343/styless

Styless 包有一个示例，说明如何在 Styled Compoments 中使用 Less 变量：https://github.com/jean343/styless/blob/master/examples/Theme.js。

但是，我无法让该示例在我的 Gatsby 网站上运行——无论我尝试在 gatsby-s-s-r.js 或 gatsby-browser.js 中的基本布局组件上实现它。

所以，我想知道——有没有一种方法可以访问 GatsbyJS 站点中样式化组件内的 Less 变量（无论有没有这些库）？如果有，怎么做？

谢谢。

【参考方案1】：

当您使用 Gatsby 时，您可以使用加载器，在这种情况下，您可以使用 "less-vars-loader!antd/lib/style/themes/default.less" 获取变量名称

这对于没有变量的简单 less 工作表可以正常工作，但是这对于 Antd 来说效果不佳，因为它们设置了一个变量 @primary-color: @blue-6;。

import React from "react"
import  Button  from 'antd';
import styled,  ThemeProvider  from "styled-components"
import Layout from "../components/layout"
import DefaultTheme from "less-vars-loader!antd/lib/style/themes/default.less"
import "antd/dist/antd.css";

const StyledButton = styled( Button )`
  background-color: @primary-color;
`;

const App = () => (
    <Layout>
        <StyledButton>Hi people</StyledButton>
    </Layout>
);
console.log( "DefaultTheme", DefaultTheme["primary-color"] ); // Here, this shows @blue-6
DefaultTheme["primary-color"] = "blue"; // For demo purpose, setting the value here.

export default () => (
    <ThemeProvider theme=DefaultTheme><App/></ThemeProvider>
);

正如所承诺的，我正在添加我的示例 webpack 加载器来解析 antd 变量。它确实解析了大约 600 个变量，但它仍然以"javascript evaluation error: 'ReferenceError: colorPalette is not defined'" 失败。这对于不需要 javascriptEnabled 的项目很有用。

const less = require( "less" );
const varRgx = /^[@$]/;

module.exports = async source => 
    const resolveVariables = async () => 
        const root = await new Promise( resolve => 
            const parseOpts = 
                javascriptEnabled: true,
                paths: ["node_modules/antd/lib/style/themes/"],
            ;
            less.parse( source, parseOpts, ( e, root, imports, options ) => 
                if( e )
                    console.error( `LESSLoader - Error compiling`, e );
                
                resolve( root );
             );
         );
        if( !root ) return;

        const evalEnv = new less.contexts.Eval();
        evalEnv.frames = [root];
        evalEnv.javascriptEnabled = true;

        const ret = ;
        for( let [name, variable] of Object.entries( root.variables() ) )
            ret[name.replace( varRgx, "" )] = variable.value.eval( evalEnv ).toCSS();
        
        return ret;
    ;

    return `module.exports = $JSON.stringify( await resolveVariables() );`;
;

这可以用import DefaultTheme from "./LESSLoader!antd/lib/style/themes/default.less" 调用。

【参考方案2】：

如果您只想在 Styled Components 中获取 Antd 变量名称，则可以改用 styless 的 import 选项。这样就简单多了，不需要解析任何变量。

在您的.babelrc 中，使用此代码导入样式。

    "plugins": [
        [
            "styless",
            
                "import": "~antd/lib/style/themes/default.less",
                "lessOptions": 
                    "javascriptEnabled": true
                
            
        ]
    ]

那么，所有的客户端代码都可以简化为：

import React from "react"
import  Button  from 'antd';
import styled from "styled-components"
import "antd/dist/antd.css";

const StyledButton = styled( Button )`
  background-color: @primary-color;
`;

export default () => 
    return <StyledButton>button</StyledButton>

不要忘记删除 .cache 文件夹以使效果生效。

【讨论】：

顺便说一句，我可以建议您将您的插件与 Ant Design 集成 - 我想有很多人可以从中受益。此外，也许您可​​以更新有关插件的文档以包含 Gatsby 的说明。不管怎样，再次感谢。

我真的很高兴这有帮助，我确实有类似的设置，并且以这种方式导入变量为我节省了很多工作。您可以根据需要建议使用此插件 :)

@Jean-PhilippeBergeron 你将如何在 styled-components mixin 中使用更少的变量（即字符串参数）？谢谢。

@Strebler，您可以使用 css 道具。例如，<div css="color: @primary"/>。