最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - react styled components style inner elements - Stack Overflow

programmeradmin1浏览0评论

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.

Share Improve this question edited Aug 21, 2020 at 9:26 asked Aug 21, 2020 at 9:04 user9855821user9855821
Add a ment  | 

3 Answers 3

Reset to default 4

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...
  }
`;
发布评论

评论列表(0)

  1. 暂无评论