如何覆盖react-bootstrap颜色？

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中传递它，就像这样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

使用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 3

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

希望这能帮到你。