CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
user9855821
user9855821

Reputation:

react styled components style inner elements

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-components 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.

Upvotes: 2

Views: 8803

Answers (3)

Luis Paulo Pinto
Luis Paulo Pinto

Reputation: 6036

You're almost there.

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

According to the styled-component documentation:

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

https://styled-components.com/docs/basics#styling-any-component

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.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/styled-components.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"} />

Upvotes: 2

Александр Кешку
Александр Кешку

Reputation: 17

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

Upvotes: 0

Abu Sufian
Abu Sufian

Reputation: 1054

First you need to define styled component 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.

Upvotes: 4

Related Questions