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

我在用蚂蚁设计和这个结合样式组件里面的一个GatsbyJS地点。我希望能够访问 Ant Design 变量（它们是用Less) 在样式组件内。像这样的事情：

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

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

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

The Styless包中有一个如何让 Less 变量在样式组件中工作的示例：https://github.com/jean343/styless/blob/master/examples/Theme.js.

但是，我无法让该示例在我的 Gatsby 网站上运行 - 无论我是否尝试在我的基本布局组件上实现它，gatsby-ssr.jsor gatsby-browser.js.

所以，我想知道 - 有没有一种方法能够访问 GatsbyJS 站点中样式组件内部的 Less 变量（无论是否有这些库）？如果是这样，怎么办？

Thanks.

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

In your .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发生效果的文件夹。