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

我正在与网站内部一起使用。我希望能够访问一个样式化组件中的Ant设计变量（用它编写）。大概是这样的：

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

我做了一些研究，发现了两个可能有帮助的图书馆，但我不知道如何让它们发挥作用（至少在盖茨比的环境下是这样）。这些是图书馆：

Styless

包中有一个示例，说明了如何在样式化组件中使用较少的变量：

然而，我一直无法在我的盖茨比网站上使用这个例子——不管我是在

Gatsby ssr.js

还是

Gatsby browser.js

中的基本布局组件上实现它

所以，我想知道——有没有一种方法能够在GatsbyJS站点中访问样式化组件内部的变量更少（有这些库或没有）？如果是，怎么做

---

谢谢。

当您使用盖茨比时，您可以使用加载器，在这种情况下，您可以使用

“less vars loader！antd/lib/style/themes/default.less”

这对于没有变量的简单较少的工作表很好，但是对于Antd来说，这不太好，因为它们设置了一个变量

@primarycolor:@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>
);

这可以通过“/LESSLoader！antd/lib/style/themes/default.less”

调用

import DefaultTheme，如果您只想在样式化组件中获取antd变量名，可以使用
styless
的
import
选项。这要简单得多，并且不需要解析任何变量

在
.babelrc
中，使用此代码导入styless

{
    "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>
}

从“React”导入React
从“antd”导入{Button}；
从“样式化组件”导入样式化
导入“antd/dist/antd.css”；
const StyledButton=styled（按钮）`
背景色：@原色；
`;
导出默认值（）=>{
返回按钮
}

不要忘了删除
.cache
文件夹以产生效果。
顺便说一句，我可以建议你将你的插件与Ant Design集成起来吗？我想很多人都会从中受益。此外，也许您可以更新插件的文档，以包括盖茨比的说明。不管是哪种方式，再次感谢。我真的很高兴这有帮助，我有一个类似的设置和导入变量，这种方式节省了我大量的工作。您可以根据自己的意愿建议使用此插件：）@Jean PhilippeBergeron您如何在样式化组件mixin（即字符串参数）中使用更少的变量？谢谢。@Strebler，你可以使用css道具。例如，
。
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>
}