Как стилизовать компонент, переданный в компонент более высокого порядка?

Question

Пример кода: https://codesandbox.io/s/confident-shadow-o84fn

Итак, у меня есть суперобрезка и базовая c версия моей проблемы по ссылке выше.

По существу - у меня есть нестандартный TextInput компонент, который я не могу изменить, но мне сказали, что мне нужно использовать. Я создал свой собственный компонент более высокого порядка, который принимает ввод по умолчанию и модифицирует его по своему вкусу. Я добавил несколько новых реквизитов, поддерживающих текст et c, который построен поверх стандартного.

Все работает, как и ожидалось, однако я не могу стилизовать компонент, который я передаю, с помощью Styled Components как Я ожидаю, что.

<Container /> и <SupportingCopy /> стилизованы так, как мне бы хотелось (поскольку они являются новыми элементами). Однако, если я не добавлю общий c input стиль внутри моего Container, я не смогу достичь того, что мне нужно.

Я пытался добавить что-то похожее на const NewStyledInput = styled(TextInput) внутри моего StyledInput, но затем я сталкиваюсь с проблемами рендеринга.

Как лучше всего стилизовать <TextInput />, так как у меня есть остальные компоненты?

В моем примере - я Хотелось бы повернуть границу моего ввода зеленым, когда isFocused равно true (как и вспомогательный текст). Я ценю, что это кажется довольно незначительным - но я довольно много вырезал из этого примера, чтобы упростить его объяснение.

Спасибо за любую помощь!

const withStyles = TextInput => {
  const StyledInput = ({ ...props }) => {
    const { onFocusCallback, onBlurCallback } = props;
    const [isFocused, setIsFocused] = useState(false);

    const handleFocusBlur = () => {
      setIsFocused(!isFocused);
    };

    return (
      <Container>
        // I want to style TextInput with Styled Components.
        <TextInput
          {...props}
          onFocusCallback={handleFocusBlur}
          onBlurCallback={handleFocusBlur}
          isFocused={isFocused}
        />
        <br />
        <SupportingCopy isFocused={isFocused}>
          Some additional text
        </SupportingCopy>
      </Container>
    );
  };

Answer 1

Я не уверен, зачем вам нужен HO C в этой ситуации, так что все довольно просто:

const Container = styled.div`
  position: relative;
`;

const SupportingCopy = styled.label`
  color: ${({ isFocused }) => (isFocused ? 'green' : 'inherit')};
  font-size: 10px;
`;

const greenBorder = css`
  border: 5px solid green;
`;

const MyNewStyledInput = styled(TextInput)`
  padding: 10px;
  ${({ isFocused }) => isFocused && greenBorder};
`;

const StyledInput = props => {
  const [isFocused, setIsFocused] = useState(false);

  const onFocusCallback = useCallback(() => setIsFocused(p => !p), []);

  return (
    <Container>
      <MyNewStyledInput
        {...props}
        isFocused={isFocused}
        onFocusCallback={onFocusCallback}
      />
      <br />
      <SupportingCopy isFocused={isFocused}>
        Some additional text
      </SupportingCopy>
    </Container>
  );
};