覆盖样式组件 3 次？

Question

我在项目中使用 react-bootstrap 和样式化组件，但在扩展样式时遇到问题 link to docs

例如，我导入并覆盖了一个 bootstrap 按钮组件：

import styled from 'styled-components';
import Button from 'react-bootstrap/Button';

export const PrimaryButton = styled(Button)`
  background-color: ${props => props.theme.purple300};
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  padding: 5px 50px;
  border: none;
  border-radius: 30px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
`;

这是一个良好的开端，但是，我也想在多个位置覆盖它，例如：

import {Button} from './button.style'

const AuthButton = styled(Button)`
  background-color: red;
`;
 ....
 <AuthButton type='submit'>Sign In</AuthButton>

AuthButton 应该有 3 个类（bootstrap，第一个样式组件，然后是第二个），但我看到了除了 AuthButton styles/class 之外的所有组件.我在 DOM 中的任何地方都没有看到 background-color: red;。我已经尝试使用 &&& 增加特异性，但仍然没有。

这是样式组件的限制还是我做错了什么？

Answer 1

您需要将 className 作为 props 传递给您的组件

Answer 2

我解决了这个问题。这是因为我的 Button 组件中没有 className 属性：https://www.styled-components.com/docs/basics#styling-any-component

编辑：由于 SO 上的模组绝对可怕，我将添加一个示例：

function MyComponent({className}) { ... }

覆盖样式组件 3 次？

Overwriting styled component 3 times?

css

reactjs

styled-components