从其他文件导入样式

Question

晚上好!我是栈的新手，对react和样式化组件几乎没有经验。我下面有一个样式片段，我想在代码的另一部分中重用，而不必一遍又一遍地输入相同的样式命令，我该如何做到这一点?我看到了一个关于如何组装的帖子，但是我不能在代码的另一部分使用它。

这个代码片段是有样式的。

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;
/* ... */
`;

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

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