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

Question

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

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

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

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

<Container />并且<SupportingCopy />都是我想要的样式（因为它们是新元素）。但是，除非我在我的内部添加通用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>
    );
  };

标签： javascriptreactjsstyled-componentshigher-order-components

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