从其他文件导入样式

Posted 2023-03-05

【中文标题】从其他文件导入样式

【英文标题】：importing stylizations from other files

【发布时间】：2021-10-10 18:50:07

【问题描述】：

晚上好！我是堆栈的新手，对 react 和 styled-components 几乎没有经验。我在下面有一个样式 sn-p，我想在代码的另一部分中重用它，而不必一遍又一遍地输入相同的样式命令，我该怎么做？我看到一篇关于如何组装的帖子，但我无法在代码的另一部分使用它。

此代码 sn-p 位于 helpers 文件夹中的 style.jsx 文件中。

import  css  from 'styled-components';

const mixins = 
  flexCenter: css`
    display: flex;
    align-items: center;
    justify-content: center;
  `,
;

export default mixins;

想要将上面的代码重新用作下面代码的一部分。

import React from 'react';
import styled from 'styled-components';
import  mixins  from '../helpers/style';

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 150px;
  /* ... */
`;

我将用其他样式对代码的其他部分做同样的事情。

【参考方案1】：

您可以通过扩展样式来重用样式化组件。

const mixins = flexCenter: css`
display: flex;
align-items: center;
`;

执行以下相同操作：

// A new component based on Button.
const PrimaryButton = styled(Button);

// A new component based on Button, but with some override styles
const PrimaryButton = styled(Button)`
      justify-content: center;
    `;