使用React Styled Components在两种类型的组件之间共享相同的样式

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 Code不会对其语法进行突出显示：

Answer 1

您这里的选择很少：

css helper function：

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

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

withComponent method：

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

"as" polymorphic prop（在 v4 中添加）：

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

Answer 2

您可以使用带有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}`;

应该正确突出显示语法（未经测试）。