添加 bg 或 btn

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

让我的工作像那样

然后在 bg="custom-button"

使用style=""HTML 元素的属性应用的样式比通过类应用的样式更具体，这就是您的第一个解决方案奏效的原因。!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 选择器。

我不确定这种效果是否有意，但我发现覆盖 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);

希望这可以帮助...

您可以使用允许覆盖底层组件 CSS 基类名称的“bsPrefix”props。bsPrefix="自定义按钮"