I have a problem on which I cannot find a simple solution. So this is my Header:

const Header = ({ title }) => {
  return (
    <div className={styles.Header}>
      <h1>{title}</h1>
      <button>
        {EXIT}
      </button>
    </div>
  );
};

How can I apply custom styles with styled-ponents for h1 and button elements? I tried

const CustomHeader = styled(Header)`
${h1} ${button}
`;

const h1 = styled(h1)`
max-width: 500px
`
const button = styled(button)`
padding-left: 100px
`

but this is not working, I get an error in terminal. I also tried this:

  return (
    <CustomHeader>
    <div className={styles.Header}>
      <h1>{title}</h1>
      <button>
        {EXIT}
      </button>
    </div>
    </CustomHeader>
  );
};

const CustomHeader = styled(Header)`
  h1 {
    max-width: 500px;
  }
  button {
    padding-left: 100px;
  }
`;

Any help will be appreciated.

I have a problem on which I cannot find a simple solution. So this is my Header:

const Header = ({ title }) => {
  return (
    <div className={styles.Header}>
      <h1>{title}</h1>
      <button>
        {EXIT}
      </button>
    </div>
  );
};

How can I apply custom styles with styled-ponents for h1 and button elements? I tried

const CustomHeader = styled(Header)`
${h1} ${button}
`;

const h1 = styled(h1)`
max-width: 500px
`
const button = styled(button)`
padding-left: 100px
`

but this is not working, I get an error in terminal. I also tried this:

  return (
    <CustomHeader>
    <div className={styles.Header}>
      <h1>{title}</h1>
      <button>
        {EXIT}
      </button>
    </div>
    </CustomHeader>
  );
};

const CustomHeader = styled(Header)`
  h1 {
    max-width: 500px;
  }
  button {
    padding-left: 100px;
  }
`;

Any help will be appreciated.

• javascript
• css
• reactjs
• styled-ponents

3 Answers 3

First you need to define styled ponent in your React function and create a wrapper like following:

// added demo css here for h1 tag, you can add your own
const CustomHeader = styled.div`
     h1 {
      font-family: Poppins;
      font-size: 14px;
      font-weight: 600;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.5;
      letter-spacing: 0.02px;
      text-align: left;
      color: #0f173a;
    }
`;

Then wrap your return inside the CustomHeader wrapper.

const Header = ({ title }) => {
  return (
    <CustomHeader>
      <h1>{title}</h1>
      <button>
        {EXIT}
      </button>
    </CustomHeader>
  );
};

You can add any tag inside CustomHeader that you want to customize.

You're almost there.

Its not working because you are setting className directly on div element of your Header ponent.

According to the styled-ponent documentation:

The styled method works perfectly on all of your own or any third-party ponents, as long as they attach the passed className prop to a DOM element.

https://styled-ponents./docs/basics#styling-any-ponent

So, in your case you need to:

const Header = ({ title, className }) => {
  return (
    <div className={className}>
      <h1>{title}</h1>
      <button>EXIT</button>
    </div>
  );
};

const CustomHeader = window.styled(Header)`
  h1 {
    max-width: 500px;
  }
  button {
    padding-left: 100px;
  }
`;

const App = () => {
  return (
    <React.Fragment>
      <Header className='' title={"title"} />
      <CustomHeader title={"title"} />
    </React.Fragment>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="//unpkg./[email protected]/dist/styled-ponents.min.js"></script>
<div id="root"></div>

So, i set Header like this:

const Header = ({ title, className }) => {
      return (
        <div className={className}>

And where i did <Header className='' title={"title"} /> you can do like this:

<Header className={styles.Header} title={"title"} />

// Code
const Header = ({ title }) => {
  return (
    <Header>
      <h1>{title}</h1>
      <button>
        {EXIT}
      </button>
    </Header>
  );
};
  
// Styles
const Header = styled.div`
  h1{
    styles...
  }
  button{
    styles...
  }
`;