Question

我有一个找不到简单解决方案的问题。这是我的标题：

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

如何为h1和按钮元素的样式组件应用自定义样式？我尝试过

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

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

但是这不起作用，终端出现错误。我也尝试过：

  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;
  }
`;

任何帮助将不胜感激。

Answer 1

首先，您需要在React函数中定义样式化的组件，并创建如下所示的包装器：

// 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;
    }
`;

然后将返回的内容包装在CustomHeader包装器中。

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

您可以在要自定义的CustomHeader中添加任何标签。

Answer 2

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

Answer 3

你快到了。

它不起作用，因为直接在Header组件的div元素上设置了className。

根据样式化组件文档：

只要您将所有传递的className属性附加到DOM元素上，该样式化方法就可以在您自己或任何第三方组件上完美地工作。

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

因此，在您的情况下，您需要：

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/styled-components@4.0.1/dist/styled-components.min.js"></script>
<div id="root"></div>

因此，我将Header设置为：

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

在我做过<Header className='' title={"title"} />的地方，您可以这样：

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

反应样式化的组件样式内部元素

3 个答案: