Styled-components React HTML elements factory for React Components

Question

I have a very basic component that displays the Page Header (<h1> tags) and Sub Headers (<h3> tags) so if I want to update any styling or add specific functionality, I can update it in one place.

With this, I'm working on a styled-components, but I'm not able to get it to work. I've taken a look here, which is a great starting example, but I wish it was completed with the full written example so I can see what I'm doing wrong.

I'm trying to get my select tag next to my header tag. I was able to get this to work with just the raw/exact html, but when I try to implement it into a component, I can't seem to get it to work. Any thoughts on what I'm doing wrong? Here is my code:

PageHeaderSubSection.js

import React from 'react'
export default class PageHeaderSubSection extends React.Component {
  render() {
    return (
      <h3 className="header-sub-content header-sub-name">
        {this.props.children}
      </h3>
    )
  }
}

MainPage.js

import React from 'react'
import styled from 'styled-components'
import PageHeader from '../common/page/PageHeader'
import PageHeaderSubSection from '../common/page/PageHeaderSubSection'


const StyledPageHeaderSubSection = styled(PageHeaderSubSection)``

const FormHeaderWithButtonStyle = styled.div`
  ${StyledPageHeaderSubSection} {
    margin: 0;
    display: inline-block;
  }
  select {
  vertical-align: text-bottom;
  }
`

class MainPage extends React.Component {

  render() {
    return (
      <>
        <PageHeader>Main</PageHeader>
        <FormHeaderWithButtonStyle>
          <PageHeaderSubSection>Main Modifiable Data</PageHeaderSubSection>
          <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 />
      </>
    )
  }
}

Answer 1

What you are trying to do is to contextually style your component FormHeaderWithButtonStyle if it is a child of PageHeaderSubsection.

There is an example here in styled-components documentation.

Abstracting from the styled-components example, this is the kind of setup you would want to have:

const Parent = styled.div``;

const Child = styled.h3`
  ${Parent} & {
    display: inline-block;
  }
`;

function MyComponent() {
  return (
    <Parent>
      <Child>Hello</Child>
      <span>world</span>
    </Parent>
  );
}

Notes

For this to work, both the parent component and the child component have to be styled-components.

• In case the component you want to style contextually is a basic React component, extend it as a styled component as done here.

Example

Applied to your specific example, you would want something like this:

// Stubs to replace your imports.
const PageHeader = ({ children }) => <h2>{children}</h2>;
const PageHeaderSubSection = ({ className, children }) => (
  <h3 className={className}>{children}</h3>
); // OR const PageHeaderSubSection = styled.h3``

// Changes start here
const FormHeaderWithButtonStyle = styled.div`
  select {
    vertical-align: text-bottom;
  }
`;

// Extend PageHeaderSubSection and apply a contextual style.
// '${FormHeaderWithButtonStyle} &' will target StyledPageHeaderSubSection that are preceeded by (have a parent of) FormHeaderWithButtonStyle.
// The '&' represents the css class for the current component.
const StyledPageHeaderSubSection = styled(PageHeaderSubSection)`
  ${FormHeaderWithButtonStyle} & {
    margin: 0;
    display: inline-block;
  }
`;

class MainPage extends React.Component {
  render() {
    return (
      <>
        <PageHeader>Main</PageHeader>
        <FormHeaderWithButtonStyle>
          {/** Make sure to use StyledPageHeaderSubSection here so that the contextual style can be applied. */}
          <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>
      </>
    );
  }
}

Link to CodeSandbox.

References:

• Extending styles: https://styled-components.com/docs/basics#extending-styles
• Referring to other components: https://styled-components.com/docs/advanced#referring-to-other-components
• Extending React components as styled-components: https://stackoverflow.com/a/54113434/13944042

Answer 2

if you want an h3 component that you can reuse and change in one place why don't you just create a styled one. you could make a styled components page and have all your styled-components in so you can import them to any page.

styled.styles.js

export const styledSubHeader= styled.h3`
margin: 0 ;
display: inline-block;

` 

then import this into your page you want to use it and wrap your content in the tag?

<styledSubHeader> SubHeaderContent </styledSubHeader>

or use it in your Main.js

import React from 'react'
import styled from 'styled-components'
import PageHeader from '../common/page/PageHeader'
import PageHeaderSubSection from '../common/page/PageHeaderSubSection'




const FormHeaderWithButtonStyle = styled.div`
  
`
const styledSubHeader = styled.h3`
margin: 0 ;
display: inline-block;

` 

class MainPage extends React.Component {

  render() {
    return (
      <>
        <PageHeader>Main</PageHeader>
        <FormHeaderWithButtonStyle>
          <styledSubHeader>Main Modifiable Data</styledSubHeader>
          <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 />
      </>
    )
  }