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";

引导程序中的样式

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

使用以下版本：

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

Answer 1

添加背景或btn

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

}

让我这样工作然后在bg="custum-button"

Answer 2

这里有个例子：

   background-color: #1F2833 !important;

在末尾随处添加！important

Answer 3

使用HTML元素的style=""属性应用的样式比通过类应用的样式更具特定性，这就是第一个解决方案起作用的原因。在样式末尾附加!important是一种覆盖其他样式的方法，这些样式比.custom-button类更具体。

我想到的一个快速解决方案是将样式存储在对象中，然后从文件中导入这些样式，以确保您不会重复自己。

styles.js

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

export default styles;

Component.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

您可以使用“ bsPrefix”道具，该道具允许覆盖基础组件CSS基类名称。 bsPrefix =“自定义按钮”

如何覆盖react-bootstrap颜色？

5 个答案: