Reactjs 如何将公共less变量与样式化组件一起使用？

假设我在index.jsx中有一个样式化的组件

import './index.less';
class Input extends React.Component {
   ...
}

我的index.less文件看起来：

.input{
   color: @whiteColor;
}

此index.less必须与根项目中导入的mixin.less一起使用

---

所以我的问题是，即使我导入了mixin.less，它也会提示变量@whiteColor not found。有什么办法解决这个问题吗？

你可以尝试导入mixin.less索引。less

我一直在尝试与你相同的方法

但后来我想。。这就是我真正想要的吗？因为样式化组件为样式提供了不同的模块化结构

检查主题，功能强大得惊人。
因为在样式化组件中，您使用javascript定义变量

如果你想要色彩操纵，比如少，sass，你可以检查

这就像是忘记了少，sass和移动到一个新的风格模块

但是，如果要保留已定义的样式类，可以执行以下操作：

class MyComponent extends React.Component {
  render() {
    // Attach the passed-in className to the DOM node
    return <div className={`some-global-class ${this.props.className}`} />;
  }
}

类MyComponent扩展了React.Component{ render（）{ //将传入的类名附加到DOM节点 返回； } } 检查文档中现有的CSS用法：

---

我也感受到了同样的痛苦，为什么我的样式化组件不能解析更少的变量？ 语法是简单的JavaScript，只需执行以下操作：

.input{
   color: ${props => props.whiteColor};
   // or
   color: ${props => props.theme.whiteColor};
}

但是，在我的公司，我们有数千个更少的组件，我们真的认为更少的语法更干净，编写速度肯定更快。我们发展了

它是一个巴别塔插件，解析更少，生成javascript代码。将其添加到.babelrc文件中

{
  "plugins": ["babel-plugin-styless"]
}

那么，我们可以做了

const Input = styled.input`
    @highlight: blue;                           // can be overwritten by theme or props
    background: darken(@highlight, 5%);         // make green darken by 5%
`;

---

查看如何使用主题提供程序并从

索引加载变量。less

这不是我的目标，我不想在每个组件中导入mixin.less也许你可以配置你的网页配置，将mixin.less添加到条目中。