如何设置传递给高阶组件的组件的样式？

Question

代码示例： https : //codesandbox.io/s/confident-shadow-o84fn

所以我在上面的链接上有一个超级精简版和我的问题的基本版本。

本质上 - 我有一个无法修改的无样式TextInput组件，但被告知我需要使用。 我创建了自己的高阶组件，它接受默认输入并根据我的喜好对其进行修改。 我添加了几个新的道具，支持文本等，它们建立在默认之上。

一切都按预期工作，但是，我无法像预期的那样设置我使用 Styled Components 传递的组件的样式。

<Container />和<SupportingCopy />都是我喜欢的样式（因为它们是新元素）。 但是，除非我在Container添加通用input样式，否则我似乎无法实现我所需要的。

我尝试在StyledInput添加类似于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

我不确定为什么在这种情况下需要 HOC，所以很简单：

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>
  );
};