Question

我是与样式化组件互动的新手，并遇到了以下问题：

如果我有10个样式化组件，并且每个组件都有属性：background-color: green;，我是否必须为每个样式化组件写一个？还是有某种方法可以全部指定呢？谢谢。

Answer 1

有两种方法可以实现共享样式。

您可以使用styled函数进一步为现有样式化的组件设置样式，因此首先声明具有共享样式的基本样式化组件，然后使用它定义更特殊的样式化组件：

import styled from 'styled-components';

const Base = styled.div`
  background-color: green;
`;

const StyledComp1 = styled(Base)`
  display: flex;
`;

const StyledComp2 = styled(Base)`
  display: block;
`;

您可以使用样式组件css实用程序功能：

import styled, { css } from 'styled-components';

const sharedStyles = css`
  background-color: green;
`;

const StyledComp1 = styled.div`
  ${sharedStyles};
  display: flex;
`;

const StyledComp2 = styled.div`
  ${sharedStyles};
  display: block;
`;

如何使用样式化组件React重叠样式？

1 个答案: