Проверьте, существует ли реквизит в стилизованных компонентах

Question

Я только начинаю со стилизованными компонентами и хочу создать варианты для таких вещей, как кнопки, навигационные панели и т. Д.

Например, я хотел бы создать темную версию панели навигации (в которой цвет фона станет темным, а цвет текста - светлым).

Что я хотел бы сделать, так это просто добавить опору темноты на компонент следующим образом:

<Navbar dark>...</Navbar>

Я бы хотел сделать это, а не что-то вроде этого:

<Navbar type="dark">...</Navbar>

Однако я не уверен, как это сделать. То есть, как мне стилизовать элемент, просто проверив, существует ли имя реквизита (без передачи значений реквизита)?

Есть идеи? Заранее спасибо.

Answer 1

styled-component поддерживает передачу реквизитов в стилизованные компоненты, и эти реквизиты могут быть доступны в литерале шаблона с тегами CSS (CSS внутри обратных ссылок) стилизованного компонента, получающего эти реквизиты.

Например,скажем, что <Navbar /> в вашем примере является стилизованным элементом <nav>, тогда мы можем определить <Navbar /> таким образом, который учитывает dark prop:

const Navbar = styled.nav`
  background: ${props => props.dark ? 'black' : 'white'}
`

В приведенном выше примеремы проверяем наличие dark проп.Если он был передан, то мы даем компоненту black цвет фона.В противном случае (по умолчанию) мы присваиваем компоненту white цвет фона:

<Navbar dark /> // produces component with black background
<Navbar /> // produces the default white background