Reactjs 已设置组件计算样式，但未应用该样式

亲爱的天才们

我正在尝试编写一个应用程序，用户可以在其中配置问题和答案，并为每个问题定义帮助文本。我是用typescript React写这篇文章的，当你想定义问题的答案类型时，它很方便

我想在问题旁边有一个按钮，显示/隐藏样式化文档。按钮看起来很好，工作也很好，但是隐藏/显示的文档没有得到应该与之关联的生成的样式类

以下是显示帮助文档的功能组件：

let HelpTextBody = function(props: { helpDocument: DocumentationStore }) {
  return (
    <div>
      {props.helpDocument.toReallySimple().map(tok => {
        return React.createElement(tok.tag, null, tok.content);
      })}
    </div>
  );
};

稍后，我将使用以下样式设置HelpTextBody：

const StyledHelpDocument = styled(HelpTextBody)`
  background-color: lightslategray;
`;

现在保持简单，这样我就可以看看它是否工作了

然后，我使用导出的按钮将其包含在组件中：

class HelpText extends React.Component<helpProps, helpState> {
  constructor(props: helpProps) {
    super(props);
    this.state = {
      hidden: true
    };
  }

  swapHidden() {
    this.setState({
      hidden: !this.state.hidden
    });
  }

  render() {
    if (this.state.hidden) {
      return (
        <span>
          <StyledButton
            itemScope={this.state.hidden}
            onClick={() => this.swapHidden()}
          >
            Need Help?
          </StyledButton>
        </span>
      );
    } else {
      return (
        <span>
          <StyledButton onClick={() => this.swapHidden()}>
            Hide Help
          </StyledButton>
          <StyledHelpDocument helpDocument={this.props.helpDocument} />
        </span>
      );
    }
  }

类帮助文本扩展React.Component{
构造函数（props:helpProps）{
超级（道具）；
此.state={
隐藏：真的
};
}
swapHidden（）{
这是我的国家({
隐藏：！this.state.hidden
});
}
render（）{
if（this.state.hidden）{
返回(
this.swapHidden（）}
>
需要帮助吗？
);
}否则{
返回(
this.swapHidden（）}>
隐藏帮助
);
}
}

因此，我将其全部打包并将内容放入浏览器，我得到的是这个样式标签（单击按钮后），它看起来很正确：

<style data-styled-components="">
/* sc-component-id: sc-bdVaJa */
.sc-bdVaJa {} .gscXTZ{background:red;color:white;font-size:1em;margin:1em;padding:0.25em 1em;border:2px solid red;border-radius:3px;}.iwtdKP{background:white;color:red;font-size:1em;margin:1em;padding:0.25em 1em;border:2px solid red;border-radius:3px;}
/* sc-component-id: sc-bwzfXH */
.sc-bwzfXH {} .hAvMqj{background-color:lightslategray;}</style>

/*sc组件id:sc bdVaJa*/
.sc bdVaJa{}.gscXTZ{背景：红色；颜色：白色；字体大小：1em；边距：1em；填充：0.25em 1em；边框：2px纯红；边框半径：3px；}.iwtdKP{背景：白色；颜色：红色；字体大小：1em；边距：1em；填充：0.25em 1em；边框：2px纯红；边框半径：3px；}
/*sc组件id:sc bwzfXH*/
.sc bwzfXH{}.hAvMqj{背景色：浅灰色；}

但是我的文档html缺少对类（.hAvMqj）的引用

隐藏帮助
这里的文字是灰色的

---

那么我错在哪里呢？我不明白为什么它会生成样式，而组件的HTML呈现。。。但该类不应用于组件！您认为如何？

您的styled components类没有被应用，因为您正在设置自定义组件的样式，但您没有将className作为道具包含在内。在正在设置样式的组件中添加className作为可选道具，并且确保在该组件的渲染方法中的某个位置应用className。对于您的情况，应添加如下内容：

let HelpTextBody = function(props: { helpDocument: DocumentationStore, className: string }) {
  return (
    <div className={props.className}>
      {props.helpDocument.toReallySimple().map(tok => {
        return React.createElement(tok.tag, null, tok.content);
      })}
    </div>
  );
};

let HelpTextBody=function（props:{helpDocument:DocumentationStore，className:string}）{
返回(
{props.helpDocument.toReallySimple（）.map（tok=>{
返回React.createElement（tok.tag，null，tok.content）；
})}
);
};

未应用已设置样式的组件类，因为您正在设置自定义组件的样式，但尚未将className作为道具包含在内。在正在设置样式的组件中添加className作为可选道具，并且确保在该组件的渲染方法中的某个位置应用className。对于您的情况，应添加如下内容：

let HelpTextBody = function(props: { helpDocument: DocumentationStore, className: string }) {
  return (
    <div className={props.className}>
      {props.helpDocument.toReallySimple().map(tok => {
        return React.createElement(tok.tag, null, tok.content);
      })}
    </div>
  );
};

let HelpTextBody=function（props:{helpDocument:DocumentationStore，className:string}）{
返回(
{props.helpDocument.toReallySimple（）.map（tok=>{
返回React.createElement（tok.tag，null，tok.content）；
})}
);
};

就是这样！现在效果很好-谢谢！这是定制组件的唯一方式？这绝对是它！现在效果很好-谢谢！这是定制组件样式的唯一方法吗？

let HelpTextBody = function(props: { helpDocument: DocumentationStore, className: string }) {
  return (
    <div className={props.className}>
      {props.helpDocument.toReallySimple().map(tok => {
        return React.createElement(tok.tag, null, tok.content);
      })}
    </div>
  );
};