Question

我有React父组件 A ，它有自己的scss文件 a-style.scss 。组件 B 是A的子组件.A将 styleInfo 对象作为道具传递给B。

我的问题是 - 我们是否可以在a-style.scss中定义 styleObj ，而不是将其定义为内联。我希望所有与样式相关的信息都应该在外部scss文件中。

组件A

import "./a-style.scss";
import B from "./B.js";

class A extends Component {
  constructor(props) {
    super(props);
  }

  const styleObj = {
    backgroundColor: "#F9F9F9",
    borderRadius: '2px',
    color: "#686868",
  };

  render() {
    return (<B styleInfo={this.styleObj}></B>);
  }
}

组件B

class B extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (<div style={this.props.styleInfo}></div>);
  }
}

Answer 1

标准方法是根据scss / css中的类定义CSS属性。然后在您的React组件中从className传递props：

class A extends Component {
  theme = "themeA";

  render() {
    return (<B styleInfo={this.theme} />);
  }
}

class B extends Component {      
  styleClass = ["B"];

  render() {
    const className = styleClass.push(this.props.styleInfo).join(' ');
    return (<div className={className} />);
  }
}

.themeA {
  background-color: #F9F9F9;
  border-radius: 2px;
  color: #686868;
}

.B {
  /* Some style for B component */
}

Answer 2

为什么不直接将这个文件导入B.js？

让它通过父母有什么好处，似乎有必要路由给我！

如果你确实需要这个，那么我就把它保存在JS中，因为这是JS擅长的，或者至少让JS只进行className切换，再次，只有一个css文件是一个主要样式查找哈希！

祝你好运！

将Ress Parent组件中的css样式传递给其子组件

2 个答案: