styled-components设置自定义PageHeaderSubSection与select同行不生效问题

问题根因 #

你的样式不生效问题存在两个核心错误：

• 自定义组件未透传className属性：styled-components 给自定义组件挂载样式的核心逻辑，是将生成的样式类名作为className参数传入组件，需要你手动将这个参数绑定到内部真实DOM节点上才能生效，你当前写死了h3标签的类名，没有接收外部传入的类名，自然无法匹配样式。
• 未使用经过styled包装后的组件：你虽然声明了StyledPageHeaderSubSection这个包装组件，但是实际JSX代码里渲染的还是原生的PageHeaderSubSection组件，包装逻辑根本没有生效。

修复方案 #

1. 修改PageHeaderSubSection.js，透传className参数 #

import React from 'react'
export default class PageHeaderSubSection extends React.Component {
  render() {
    return (
      {/* 拼接原有类名和外部传入的类名 */}
      <h3 className={`header-sub-content header-sub-name ${this.props.className || ''}`}>
        {this.props.children}
      </h3>
    )
  }
}

2. 修改MainPage.js，使用包装后的组件 #

把JSX中渲染的原组件替换为你声明的styled包装组件即可：

// 其余引入和样式代码保持不变
class MainPage extends React.Component {
  render() {
    return (
      <>
        <PageHeader>Main</PageHeader>
        <FormHeaderWithButtonStyle>
          {/* 替换为包装后的组件 */}
          <StyledPageHeaderSubSection>Main Modifiable Data</StyledPageHeaderSubSection>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <select className="form-control w-auto" >
            <option key={0} value={0}>None</option>
            <option key={1} value={"Select 1"}>{"Select 1"}</option>
            <option key={2} value={"Select 2"}>{"Select 2"}</option>
            <option key={3} value={"Select 3"}>{"Select 3"}</option>
          </select>
        </FormHeaderWithButtonStyle>
        <MoreDataHere />
      </>
    )
  }
}

修改完成后就能实现h3标签和select标签同行显示的效果。

内容的提问来源于stack exchange，提问作者StudiousProgrammer