覆盖样式组件 3 次？

Question

我在项目中使用 react-bootstrap 和样式化组件，并且在将 styles 链接扩展到文档时遇到问题

例如，我导入并覆盖了引导按钮组件：

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 个类（引导程序，第一个样式组件，然后是第二个），但是我看到了除 AuthButton 样式/类之外的所有内容。 我没有看到background-color: red; DOM 中的任何位置。 我尝试使用&&&增加特异性，但仍然没有。

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

Answer 1

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

Answer 2

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

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

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