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

Question

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

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

本质上 - 我有一个未设置样式的 TextInput 组件，我无法修改，但被告知我需要使用。我已经创建了我自己的高阶组件，它接受默认输入并根据我的喜好修改它。我已经添加了几个新的道具，支持文本等，这些都是在默认的基础上构建的。

一切都按预期工作，但是，我无法像我期望的那样设置我通过样式化组件传递的组件的样式。

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

我尝试在我的 StyledInput 中添加类似于 const NewStyledInput = styled(TextInput) 的内容，但随后我遇到了渲染问题。

因为我有组件的其余部分，所以设置 <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>
  );
};

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

How to style the component passed into a higher order component?

javascript

reactjs

styled-components

higher-order-components