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

Question

我在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包有一个示例，说明如何让 Less 变量在 Styled Compoments 中工作：https : //github.com/jean343/styless/blob/master/examples/Theme.js。

但是，我无法在我的 Gatsby 站点上使用该示例——无论我尝试在我的基本布局组件、ingatsby-ssr.js或gatsby-browser.js.

所以，我想知道 - 有没有办法能够访问 GatsbyJS 站点中样式组件内的 Less 变量（使用这些库或不使用这些库）？如果是这样，如何？

谢谢。

Answer 1

如果你只盯着获得在样式化组件的Antd变量名，你可以转而使用import的选项styless。这要简单得多，而且不需要解析任何变量。

在您的 中.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要产生效果的文件夹。