Css 覆盖样式化组件3次？

我在项目中使用react引导和样式化组件，在扩展样式方面遇到问题

例如，im导入和覆盖引导按钮组件：

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>

import{Button}from./Button.style'
const AuthButton=已设置样式（按钮）`
背景色：红色；
`;
....
登录

AuthButton

应该有3个类（引导、第一个样式化组件，然后是第二个），但是我看到了除了AuthButton样式/类之外的所有东西。我看不到背景色：红色DOM中的任意位置。我尝试过使用

&&&

来增加特异性，但仍然没有结果

---

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

您需要传递

className

作为组件的道具我修复了这个问题。这是因为我的按钮组件中没有类名道具：

编辑：由于mods在这方面绝对可怕，我将添加一个示例：

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

---

我看代码没有任何问题。请尝试在中或类似内容中获取此问题的工作示例