【问题标题】:How implement css mixes in styled-components?如何在样式组件中实现 CSS 混合?
【发布时间】:2021-01-31 14:53:46
【问题描述】:

我在我的项目中使用了一些基类,例如 text-lg、text-md...、.container 等。 通常我是这样写的:

<div class="article text-lg container">some content</div>

如何使用 styled-components 做这样的事情?为这些类创建 mixin,或者只是混合使用 styled-components 和 css 类?

【问题讨论】:

    标签: css reactjs styled-components


    【解决方案1】:

    您可以使用css helper 创建您的基类并将它们组合起来。

    const container = css`
      padding: 20px;
    `;
    const article = css`
      max-width: 1920px;
    `;
    const textLg = css`
      font-size: 3rem;
    `;
    
    const CustomDiv = styled.div`
      ${container + article + textLg}
    
      /* other styles here */
      background: black; 
      color: white;
    `;
    

    或者,如果您已经有一个现有的样式表(例如 CSS 库,如 Bootstrap),您可以使用 attrs 将它们组合起来。这可以节省您在 JS 中重写 CSS 的时间。在此处阅读官方文档:https://styled-components.com/docs/faqs#can-i-use-css-frameworks

    const CustomDiv = styled.div.attrs(props => ({
      className: "article text-lg container",
    }))`
      /* other styles here */
      background: black; 
      color: white;
    `;
    

    基本上,输出将是您自定义生成的类,其中包含backgroundcolor CSS 属性,以扩充您的样式表中定义的articletext-lgcontainer

    【讨论】:

    • 将这些时刻结合起来是正常的做法吗?或者更好的方法 -> 为每个类创建样式混合,例如:export const textLg = css font-size: 3rem; export const container = css max-width: 1920px; 并将它们粘贴到样式组件中?
    • 如果您从头开始制作所有内容,这也是一种方法。我提供的信息的一般优势是,如果您已经拥有一个现有的样式表,但您没有权限将其重写为 JavaScript。在这方面,这完全取决于您的前端架构,哪个是更好的实施/实践。
    猜你喜欢
    • 1970-01-01
    • 2020-12-22
    • 1970-01-01
    • 2022-09-30
    • 2016-12-31
    • 1970-01-01
    • 2012-02-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多