如何覆蓋反應引導顏色？

Question

我正在尋找如何更改它，但似乎沒有一個解決方案對我有用。

我想覆蓋 react-bootstrap 按鈕的顏色。

下面的這個解決方案工作得很好，正是我想要做的：

<Button
   block
   style={{backgroundColor: '#0B0C10', borderColor: '#45A293', color: '#45A293', borderRadius: '100px'}}
>
   sample text
</Button>

但我不想每次使用按鈕時都重寫它，所以我想用 css 解決，我試過使用這個：

.custom-button {
    background-color: #1F2833;
    border-color: #45A293;
    border: 3px solid-transparent;
    color: #45A293;
    border-radius: 100px;
}

然后像 className="custom-button" 一樣在 className 中傳遞它，但它並沒有真正起作用。

我正在使用 react-bootstrap 中的 Button

import {Button} from "react-bootstrap";

來自 bootstrap 的樣式

import 'bootstrap/dist/css/bootstrap.min.css';

使用版本如下：

"react-bootstrap": "^1.0.0-beta.5",
"bootstrap": "^4.3.1",

Answer 1

添加 bg 或 btn

.bg-custom-button {
    background-color: #1F2833;
    border-color: #45A293;
    border: 3px solid-transparent;
    color: #45A293;
    border-radius: 100px;
}

讓我的工作像那樣

然后在bg="custom-button"

Answer 2

這是一個例子：

   background-color: #1F2833 !important;

在最后到處添加！重要

Answer 3

使用 HTML 元素的style=""屬性應用的style=""比通過類應用的樣式更具體，這就是您的第一個解決方案奏效的原因。 在樣式末尾附加!important是覆蓋比.custom-button類更具體的其他樣式的一種方式。

我想到的一個快速解決方案是將樣式存儲在一個對象中並從文件中導入它們，這將確保您不會重復自己。

樣式.js

const styles = {
    customButton: {
        backgroundColor: '#0B0C10',
        borderColor: '#45A293',
        color: '#45A293',
        borderRadius: '100px'
    }
};

export default styles;

組件.jsx

import { styles }  from './styles.js'

<Button
   block
   style={styles.customButton}
>
   sample text
</Button>

否則，您將不得不嘗試附加 ID 或構建更具體的 css 選擇器。

Answer 4

我不確定這種效果是否有意，但我發現覆蓋 React Bootstrap css 的最簡單方法是使用 Material ui withStyles。 這是一個例子。

import React from 'react';

import { withStyles } from '@material-ui/styles';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Button from 'react-bootstrap/Button';

const styles = {
    logoContainer: {
        position: 'fixed',
    },
    rowStyles: {
        marginBottom: '10px',
    },
    button: {
        border: '3px inset #ffc107',
        borderRadius: '50%',
        width: '55px',
        height: '55px',
        fontFamily: 'fangsong',
        fontSize: '1em', 
        fontWeight: '700',
        color: 'white',
        backgroundColor: 'rgb(0,0,0, 0.5)',
    }
}

const Logo = (props) => {     
    const logoStyles = props.classes;
    return (
    <div>
    <Container container='true' className={logoStyles.logoContainer}>
        <ButtonGroup >            
            <Col>
                <Row className={logoStyles.rowStyles}>
                    <Button onClick={{}} className={logoStyles.button}>BS</Button>
                </Row>
            </Col>            
        </ButtonGroup> 
    </Container>
    </div>
);                           
                    }

export default withStyles(styles)(Logo);

希望這可以幫助...

Answer 5

您可以使用允許覆蓋底層組件 CSS 基類名稱的“bsPrefix”道具。 bsPrefix="自定義按鈕"