Совместно использовать одни и те же стили для двух типов компонентов с компонентами React Styled

Question

Я хотел бы применить одинаковые стили к элементу input и элементу select.

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

const styles = `
    background-color: white;
    width: 100%;
    border: 0 solid transparent;
    border-radius: 10px;
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1.2rem;
`

const Select = styled.select`${styles}`
const Input = styled.input`${styles}`

Есть ли лучший способ сделать это, который не предполагает использование «сырой» строки? Недостаток использования необработанной строки styles состоит в том, что код Visual Studio не выделяет синтаксис:

Answer 1

Вы можете использовать теги шаблона css с тегами:

import styled, { css } from "styled-components";

const styles = css`
  background-color: white;
  width: 100%;
`;

const Select = styled.select`${styles}`;
const Input = styled.input`${styles}`;

Синтаксис должен быть правильно выделен (не проверено).

Answer 2

У вас есть несколько вариантов здесь:

вспомогательная функция css :

const styles = css`
  background-color: white;
  // ...
`;

const Select = styled.select`${styles}`;
const Input = styled.input`${styles}`;

скомпонентным методом :

const Select = styled.select`
  background-color: white;
  // ...
`;
const Input = Select.withComponent('input');

"как" полиморфная опора (добавлено в v4 ):

<Select as="input">
  ...
</Select>