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个类（引导程序，第一个样式化的组件，然后第二个），但是我看到了除AuthButton样式/类之外的所有内容。我在DOM的任何地方都看不到background-color: red;。我尝试使用&&&来提高特异性，但还是一无所获。

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

Answer 1

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

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

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

Answer 2

您需要通过className作为道具的道具

覆盖样式化组件3次？

2 个答案: