Javascript 如何设置传递到高阶组件中的组件的样式？

代码示例：

因此，我有一个超级剥离回来，我的问题在上面的链接基本版本

本质上-我有一个未设置样式的

TextInput

组件，我无法修改它，但被告知需要使用它。我已经创建了自己的高阶组件，它接受默认输入并根据自己的喜好对其进行修改。我已经添加了一些新的道具，支持文本等，建立在默认的基础上

一切都如预期的那样工作，但是，我无法像预期的那样使用已设置样式的组件来设置我正在传递的组件的样式

和

都是我喜欢的样式（因为它们是新元素）。然而，除非我在我的

容器中添加一个通用的
输入
样式，否则我似乎无法实现我所需要的

我曾尝试在我的
StyledInput
中添加类似于
constnewstyledinput=styled（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>
    );
  };

constwithstyles=TextInput=>{
常量StyledInput=（{…props}）=>{
const{onFocusCallback，onBlurCallback}=props；
const[isFocused，setIsFocused]=useState（false）；
常量handleFocusBlur=（）=>{
setIsFocused（！isFocused）；
};
返回(
//我想用样式化组件设置TextInput的样式。


一些补充文本
);
};
我不确定在这种情况下为什么需要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>
  );
};

const Container=styled.div`
位置：相对位置；
`;
const SupportingCopy=styled.label`
颜色：${（{isFocused}）=>（isFocused？'green'：'inherit'）；
字体大小：10px；
`;
const greenBorder=css`
边框：5px纯绿色；
`;
const MyNewStyledInput=styled（TextInput）`
填充：10px；
${（{isFocused}）=>isFocused&&greenBorder}；
`;
const StyledInput=props=>{
const[isFocused，setIsFocused]=useState（false）；
const onfocuscalback=useCallback（（）=>setIsFocused（p=>！p），[]）；
返回(


一些补充文本
);
};

也许是一个愚蠢的问题，但这只是一个老生常谈的问题“使用包装器传递一个CSS类，然后使用针对该类下元素的普通CSS”没有选择？这可能有点过头了，但是你试过使用react jss插件吗？@Mike'Pomax'Kamermans这不是一个愚蠢的问题，可能是我应该在我的问题中解决的问题。这是企业设定的惯例，所以我对这一领域没有太多的控制权。不过肯定会是一个快速修复方法！@cEllist我可以做到通过在我的
容器中添加
输入
一组样式
样式来实现类似的功能。更高的权力告诉我，这不是他们认为的工作方式。（但不能给我任何进一步的帮助…显然！）你必须用HOC（with styles）进行样式设置吗？因为有更简单的方法谢谢你在这里的帮助丹尼斯-我想我被引导到错误的道路上，因为我被告知要看如何使用HOC！