Где стилизованные стили компонентов должны находиться в дереве компонентов?

Question

В стилизованной среде компонентов предположим, что у меня есть:

<Header>
  <List ...>
    <ListItem ... />
    <ListItem ... />
    <ListItem ... />
  </List>
</Header>

И я хочу иметь некоторые стили для ListItem, которые применяются только тогда, когда этот компонент используется внутри заголовка.

Должен ли я передать реквизит List, а затем этот компонент должен передать его в ListItem, чтобы я мог включить набор стилей внутри ListItem?

Или

Должен ли я стилизовать ListItem внутри заголовка, потому что это стили, которые будут использоваться только один раз, и я не хочу испортить ListItem всеми возможностями, которые могут возникнуть во всем моем приложении.Кроме того, у меня нет доступа к отображаемым компонентам ListItem, потому что они отображаются списком.

Answer 1

Кажется, что вы можете обойтись без передачи здесь опоры: это может быть сделано исключительно с учетом специфики CSS.Например, вы можете добавить соответствующее имя класса в элемент списка, что скажет селектору компонентов в стиле заголовка применить стили для него следующим образом:

const HeaderWithClassNameSpecificity = styled.div`
  .inside-header { // apply this to Header children with className="inside-header"
    background: salmon;
  }
`;

, и ваш элемент списка будет выглядеть так:

 <ListItem className="inside-header" />

Другой способ - стилизовать дочерние элементы заголовка на основе их специфичности имени тега, и ваш заголовок будет

const HeaderWithTagNameSpecificity = styled.div`
  ul li {  // apply this to Header children which are <li> items inside <ul>
    background: salmon;
  }
`;

, поэтому вам не нужно добавлять className в ListItem при условии, что это "li"."item, который является дочерним для" ul ".

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

Проверьте здесь подтверждение концепции: https://codesandbox.io/s/wy35njlmyl

Answer 2

styled-components предоставляет встроенный способ для со ссылкой на другие компоненты :

const Container = styled.div`
  ${Header} {
    background-color: yellow;
  }
`;

Пример:

const { render } = ReactDOM;
const styled = styled.default;

const Header = styled.h1`
  color: red;
`;

const Container = styled.div`
  ${Header} {
    background-color: yellow;
  }
`;

function App() {
  return (
    <main>
      <Header>Header</Header>
      <Container>
        <Header>Header inside Container</Header>
      </Container>
    </main>
  );
}

render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.4.10/styled-components.js"></script>
<div id="root"></div>

Answer 3

заголовок ListItem {/ * теперь напишите ваш стиль здесь, чтобы стиль не применим к элементам ListItem, которые не находятся внутри заголовка, удачи * /

}