Вложенные компоненты - применение независимых стилей

Question

Итак, у меня есть реактивный компонент, которому я могу передать 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

Вы можете сделать это вручную только с помощью css, например:

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

    &--regular-size .column,
    &--small-size &--regular-size .column,
    &--large-size &--regular-size .column
    {
      height: 60px;
    }

    &--large-size .column,
    &--small-size &--large-size .column,
    &--regular-size &--large-size .column
    {
      height: 80px;
    }
  }

Или отступить к встроенному стилю:

const small = {height : '40px'};
const regular = {height : '60px'};
const large = {height : '80px'};

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

Answer 2

Поменяйте местами порядок включения стилей.

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

В CSS, если элементы имеют одинаковую специфику, последний элемент будет иметь приоритет.Поскольку ваш код является маленьким дочерним элементом обычного кода, ваш CSS также должен это отражать.