覆蓋樣式組件 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}) { ... }