reactjs - 如何在样式组件中使用通用的 less 变量？

Question

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

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

我的 index.less 文件看起来:

.input{
   color: @whiteColor;
}

这个 index.less 必须与在根项目中导入的 mixin.less 一起使用。

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

Answer 1

我也有同样的痛苦，为什么我的样式组件不能解决更少的变量？
语法是简单的 JavaScript，只需执行以下操作:

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

但是，在我的公司，我们减少了数千个组件，我们真的认为语法越少越好，而且编写起来肯定更快。我们开发了 Styless .

它是一个 babel 插件，解析较少并生成 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%
`;

查询 here查看如何使用主题提供程序并从您的 index.less 加载变量!