Question

我有一个Field Formik的组件，为了应用自定义CSS，我这样做：

const Input = styled(Field)`
  // CSS goes here
`

并使用Input组件，效果很好。但是，我在很多地方都使用了完全相同的CSS，因此我已经将这些CSS提取到名为SuperInput

的独立样式组件中。

现在，如何扩展样式组合？我需要类似的东西

const Input = styled(Field)`
  // inlucde CSS from SuperInput component here
`

示例代码。

import styled from 'styled-components'

const SuperInput = styled.input`
  // CSS here
`

import { Field } from 'formik'
import { SuperInput } from 'styled_components/super_input'

const SomeFormComponent = () => (
  <>
   // How to use here <Field /> that has <SuperInput /> CSS applied?
  </>
)

Answer 1

基本上，您只需要在模板文字内进行扩展或附加即可使其正常工作。您可以将通用CSS保留为

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

const commonCss = css`
  background: red;
`

并且可以像这样在您的组件中使用它：

const Input = styled(Field)`
// CSS goes here
  ${commonCss}
  color: hotpink;
`;

const Input1 = styled(Field)`
  ${commonCss}
  color: lightblue;
`;

这应该允许您在各种样式化的组件中使用通用CSS。有关更多信息，您可以阅读css styled component API

编辑：样式化的组件会创建HOC。添加了superInput定义后，我了解您正在尝试执行的操作。因此，您的superInput正在使用您要重用的某些css属性创建一个按钮。在这种情况下，当您使用Field并尝试扩展作为按钮的SuperInput时没有任何意义。默认情况下，您的Field组件是输入元素（文本框），可以是复选框，单选框，文件输入。无论用superInput编写的CSS是什么，都可以按照我上面提到的方式提取出来并在多个地方使用。您尝试做的方法不是设计样式化组件的方法。这是我的理解

注意：在这里我可能会错关于是否可能。但是，根据我的觉悟，我可以这样说。如果我错了，任何人都可以纠正我。

扩展样式化的组件

1 个答案: