Reactjs 如何在react bootstrap中创建超大按钮，而不仅仅是'size="；lg"`

我看着，只能看到

size=“lg”

较大，但我希望更大，如下图所示：

图片：

我现在使用的是：

size=“lg”

我可以用react引导或者使用css来实现更大的风格吗？我在四处搜索时找不到详细信息，而且我对此有点陌生。此外，文本输入和按钮，以及应该是冷静的，如果他们在哪里更大

哦，是的，这是我的反应组件：

import React from 'react';
import { connect } from 'react-redux';
import { Navbar, Nav, Form, FormControl, Button, NavDropdown, NavItem, Container, Row, Col } from 'react-bootstrap';
import MenuItem from './MenuItem';
import logo1 from '../../assets/The first 100 weeks in pictures and more7.png';

class NavBar extends React.Component {
    constructor() {
        super();
        this.state = { showMenu: false };
        this.handleMenuClick = this.handleMenuClick.bind(this);
    }

    handleMenuClick() {
        const { showMenu } = this.state;
        this.setState({ showMenu: !showMenu });
    }

    render() {
        return (
            <>
                <Navbar bg="dark" variant="dark" fixed="top">
                    <Container fluid>
                        <Col md="auto">
                            <Navbar.Brand href="#home" className="img-container">
                                <img alt="" src={logo1} />
                            </Navbar.Brand>
                        </Col>
                        <Col md="auto">
                            <Nav.Item>
                                <Form inline>
                                    <FormControl type="text" placeholder="Title, event, date" className="mr-sm-2" size="lg" />
                                    <Button variant="outline-info" size="lg">
                                        Search
                                    </Button>
                                </Form>
                            </Nav.Item>
                        </Col>
                        <Col md="auto">
                            <Button variant="primary" size="lg">
                                Articles
                            </Button>{' '}
                            <Button variant="primary" size="lg">
                                Timeline
                            </Button>{' '}
                            <Button variant="primary" size="lg">
                                About
                            </Button>{' '}
                        </Col>
                        <Col md="auto">
                            <Nav.Item>
                                <NavDropdown title="Events" id="basic-nav-dropdown" className="justify-content-left">
                                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                    <NavDropdown.Divider />
                                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                                </NavDropdown>
                            </Nav.Item>{' '}
                        </Col>
                    </Container>
                </Navbar>
            </>
        );
    }
}

const mapStateToProps = state => {
    return { articles: state.rootReducer.remoteArticles };
};

const Aaa = connect(mapStateToProps, null)(NavBar);
export default Aaa;

从“React”导入React；
从'react redux'导入{connect}；
从“react bootstrap”导入{Navbar、Nav、Form、FormControl、Button、NavDropdown、NavItem、Container、Row、Col}；
从“/MenuItem”导入菜单项；
从“../../assets/图片和more7.png”中的前100周导入logo1；
类NavBar扩展了React.Component{
构造函数（）{
超级（）；
this.state={showMenu:false}；
this.handleMenuClick=this.handleMenuClick.bind（this）；
}
handleMenuClick（）{
const{showMenu}=this.state；
this.setState（{showMenu:！showMenu}）；
}
render（）{
返回(
搜寻
文章
{' '}
时间线
{' '}
关于
{' '}
行动
另一个动作
某物
分离环
{' '}
);
}
}
常量mapStateToProps=状态=>{
返回{articles:state.rootReducer.remoteArticles}；
};
常量Aaa=连接（mapStateToProps，null）（导航栏）；
出口违约Aaa；

以下是定制尺寸的文档：

{`
.btn单位{
背景颜色：紫色；
颜色：白色；
}
.btn巨大{
填充物：5雷姆10雷姆；
字体大小：1.5rem；
}
.btn小型{
填充：0.2rem 0.2rem；
字体大小：12px；
}
`}
你好，世界
你好，世界

---

是的，您可以通过CSS执行此操作。通过定义与组件匹配的css类来创建自己的自定义大小，如下所述：

看

在您的示例中，我将创建一个单独的文件，例如./styles/styles.css，您可以将其导入到应用程序或组件的js文件中（通常是前者，这样您就可以在应用程序中的任何地方使用它）。更好的做法是这样分解它，而不是像示例中所示的那样内联定义它，以便您可以重用它。在其中，您可以定义您想要的任何样式，例如解决您的问题：

.btn-xxl {
  font-size: 1.5rem;
}

然后将该文件导入应用程序或组件的js文件

import './styles/styles.css'

然后在JSX中使用新标记

<Button variant="primary" size="xxl">
  Articles
</Button>{' '}

文章
{' '}

---

这样，您也可以在应用程序的其他地方使用xxl大小，如果您想要更改它，您只需在styles.css文件中进行更改。如果你开始像这样创建大量css，你可以将styles.css分解成单独的文件，由styles.css导入。

两个答案都解释了，所以我接受第一个！谢谢，我学到了很多。

<Button variant="primary" size="xxl">
  Articles
</Button>{' '}