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加载变量！

Answer 2

您可以尝试在index.less

中导入mixin.less

Answer 3

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

但是后来我想..那是我真正想要的吗？因为样式化组件为您的样式提供了一种具有模块化结构的不同方法。

https://www.styled-components.com/docs/advanced检查主题，功能强大。
因为在样式化的组件中，您使用javascript定义了变量。

如果您想要更少的色彩处理，那么可以检查https://github.com/erikras/styled-components-theme

这就像忘记了一些东西，然后丢掉并将其移至新样式的模块。

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

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

从docs检查现有CSS用法： https://www.styled-components.com/docs/advanced#existing-css

如何使用常见的less变量与样式组件？

3 个答案: