Расширение стилизованных компонентов

Question

У меня есть компонент Field Formik, чтобы применить пользовательский CSS, я делаю:

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

И использую компонент Input, работает отлично.Однако я использую один и тот же CSS во многих местах, поэтому я извлек этот CSS в автономный стиль-компонент с именем SuperInput

Теперь, как можно расширить style-компонент?Мне нужно что-то вроде

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 в различных стилевых компонентах.Для получения дополнительной информации вы можете прочитать через API-компонент в стиле CSS

Редактировать: Стилизованные компоненты создают HOC.После добавления определения superInput я понимаю, что вы пытаетесь сделать.Таким образом, ваш superInput создает кнопку с определенными свойствами CSS, которые вы пытаетесь использовать повторно.В том случае, когда вы используете Field и пытаетесь расширить SuperInput, который является кнопкой, не имеет смысла.Ваш компонент Field по умолчанию является элементом ввода (текстовым полем), это может быть флажок, радио, а также ввод файла. Независимо от того, что CSS написан в superInput, его можно извлечь способом, упомянутым выше, и использовать его в разных местах.То, как вы пытаетесь это сделать, - это не то, как разработан стилизованный компонент.Это мое понимание

Примечание: я могу ошибаться в том, возможно ли это или нет.Но это то, что я могу сказать в соответствии с моим осознанием.Кто угодно, поправьте меня, если я ошибаюсь.