css - 嵌套组件——应用独立样式

Question

所以我有一个 react 组件，我可以将 size 属性传递给它。它可以是 small、regular 或 large 并且基于分配的 css 类类型 - 它们看起来像这样:

.my-component {
  &--small-size .column {
    height: 40px;
  }
  &--regular-size .column {
    height: 60px;
  }
  &--large-size .column {
    height: 80px;
  }
}

问题是，当我嵌套这些组件时(参见下面的示例)，我从父级获取样式(因此这里嵌套的 MyComponent 的大小仍然是 regular 而不是 small - 这是纯 CSS 问题。

如何解决这个问题，使嵌套组件始终获得独立的样式？

const Page = (props) => {
  return (
    <MyComponent size="regular">
      {/* Some other HTML elements*/}
      <MyComponent size="small">
        ...
      </MyComponent>
    </MyComponent>
  );
};

Answer 1

交换样式包含的顺序。

.my-component {
  &--large-size .column {
      height: 80px;
  }
  &--regular-size .column {
      height: 60px;
  }
  &--small-size .column {
     height: 40px;
  }
}

在 CSS 中，如果元素具有相同的特异性，则最后一项优先。由于您的代码嵌套很小，就像常规子项一样，您的 CSS 也应该反射(reflect)这一点。