css - 覆盖样式组件 3 次？

Question

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

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

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 样式/类之外的所有内容。我在 DOM 的任何地方都看不到 background-color: red;。我已经尝试使用 &&& 提高特异性，但仍然没有。

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

Answer 1

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

编辑:由于 MOD 在 SO 上绝对可怕，我将添加一个示例:

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