覆盖通过JavaScript文件加载的SCSS文件变量的可行方法是什么？

Question

假设我有一个组件包含一个用于行为的JavaScript文件,一个HTML模板文件和一个用于外观的SCSS文件.

我们使用Webpack在应用程序的主JavaScript中加载组件的JavaScript(例如,通过require('./path/to/the-component.js')).我们使用组件的JavaScript加载其SCSS文件(通过require('./the-component.scss')).

组件的SCSS文件包含一个具有默认值的变量(例如,最小高度:) $min-height: 400px.

如果我不喜欢组件的所有用法中的400px:我如何覆盖这样的变量(例如在应用程序的SCSS文件*中)来调整$min-height到500px？当然,由于违反关注点分离原则并不是一个好主意,因此组件不应该对其周围目录的组织方式做出任何假设.

到目前为止,我没有找到解决这个问题的方法.但我确信有人做过.

*)以及如何(在哪里)我应该加载这样的文件(通常,我通过app.js加载app.scss)

Answer 1

我认为通过 scss 不可能实现您想要的，因为组件的所有实例最终都将具有相同的样式（除非您像Tyler Biscoe建议的那样使用多个类）。最后，您将拥有该组件的一个静态 css 文件，并且所有实例都将共享它。

考虑重构您的 scss 以取出$min-heightscss，使其成为组件的参数并使用内联样式来应用它。对于 React 来说，它看起来像这样：

import './MyComponent.scss';

class MyComponent extends Component {
  render() {
    return (
      const divStyle = {
        minHeight: this.props.minHeight
      }
      <div style={divStyle}></div>
    );
  }
}

然后你可以添加任意宽度的组件：

class App extends Component {
  render() {
    return (
      <MyComponent minHeight="300px"/>
      <MyComponent minHeight="400px"/>
      <MyComponent minHeight="500px"/>
    );
  }
}

这样，您可以从 MyComponent 中提升 min-height 参数，并让更高的组件指定它。

更新：

我想你可以从 mycomponent.scss 中取出$min-height并将其设置在父级中。假设您必须设置$min-heightcss.my-component类，在父级的 scss 文件中您可以执行以下操作：

.large-component > .my-component {
  min-height: $large-min-height;
}

.small-component > .my-component {
  min-height: $small-min-height;
}

但同样，这不允许您将参数传递给组件，只能根据组件的父容器设置样式。