Правила стиля, основанные на переносе родительских классов

Question

Я вытягиваю некоторые компоненты из своего приложения реагирования в библиотеку компонентов и обновляю их, чтобы они стали компонентами стиля, чтобы я мог использовать их в другом проекте ssr. Первый шаг: заставить эти компоненты работать в библиотеке как styleled-компоненты для текущего проекта

У меня есть компонент, который в настоящее время имеет дополнительные правила s css, когда он используется в определенных родительских элементах. например,

.myElement {
  border: 1px solid red;
}
.specialCase {
  .myElement {
    border: 1px solid blue;
  }
}

Как мне адаптировать это в стилизованный компонент? Если у меня есть мой стилизованный компонент, например:

styled(MyElement)`
  border: 1px solid red;
`

Очевидно, я не могу использовать здесь родительский селектор .specialCase.

У меня есть пара ограничений - компонент выше, который обеспечивает .specialCase класс не является стилизованным компонентом и отсутствует в библиотеке компонентов. Также я не хочу, чтобы в компоненте были условные правила, так как я хочу, чтобы это изменение стиля происходило без повторной визуализации. то есть, когда класс добавляется к его родителю, он не должен перерисовывать myElement.

Может кто-нибудь помочь мне с подходом, который может решить эту проблему? Я новичок в стиле компонентов

Answer 1

Родительский компонент все еще может выбрать .myElement, вам просто нужно добавить className="myElement" к стилизованному компоненту.

В следующем примере Container может быть любым компонентом (не имеет быть styled):

const Container = styled.div`
  .myElement {
    border: 2px solid blue;
  }
`;

const Child = styled.div`
  border: 1px solid red;
`;

const App = () => {
  return (
    <Container>
      <Child className="myElement">Hello</Child>
    </Container>
  );
};