Question

这是我的问题的简化版本，所以我希望我能说明问题。我有一个React组件，它是许多其他组件的父级，它们应该都具有应用于嵌套的每个组件的相同样式。我主要想干的事情。

const compStyle = `.user-section{
                      padding: 2rem 2.5rem;
                      background: #f8f8f8;
                      margin-bottom: 15px;
                      border-radius: 2px;
                      min-height: 225px;
                      border: solid 1px rgba(0, 0, 0, 0.09);
                    }
                    .dog{
                      text-align: right;
                    }`


class PetsIndex extends React.Component {

  render(){

    return (
      <UserInfo style={compStyle}/>
      <PetsInfo style={compStyle}/>
    )
  }
}

在每个组件中，我使用Style标签应用样式，因此它看起来像<style>{this.props.style}</style>。

所以样式到了那里，但由于某种原因它不会读取第一个选择器并应用样式。例如，在上面的代码中，根据订单现在的情况，它将应用属于.dog类的样式，但不应用.user-section类。但是，如果我将订单切换到：

               `.dog{
                  text-align: right;
                }
                .user-section{
                  padding: 2rem 2.5rem;
                  background: #f8f8f8;
                  margin-bottom: 15px;
                  border-radius: 2px;
                  min-height: 225px;
                  border: solid 1px rgba(0, 0, 0, 0.09);
                }`

翻转结果并且未应用.dog样式并应用.user-section样式。我确实发现如果我先放一些随机的东西，比如：

               `div{}
                .user-section{
                  padding: 2rem 2.5rem;
                  background: #f8f8f8;
                  margin-bottom: 15px;
                  border-radius: 2px;
                  min-height: 225px;
                  border: solid 1px rgba(0, 0, 0, 0.09);
                }
                .dog{
                  text-align: right;
                }`

我发现它工作正常，我拥有所需的所有风格。这是当前的错误吗？或者我错过了什么？

非常感谢帮助！

将样式作为属性传递给嵌套的React组件

0 个答案: