如何在react-bootstrap中创建不仅仅是“ size =“ lg”的超大按钮？

如何解决如何在react-bootstrap中创建不仅仅是“ size =“ lg”的超大按钮？

我看着docs，只能看到size="lg"很大，但我想像这样的图片显示更大：

图片：

现在我使用的是：size="lg"

我是否可以使用CSS使用react-bootstrap做这种更大的样式？我在搜索时找不到详细信息，对此我还是有点陌生​​。另外，如果它们较大，则文本输入和按钮也应该很酷。

哦，是的，这是我的React组件：

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;

解决方法

以下是自定义尺寸的文档：https://react-bootstrap.github.io/getting-started/theming/#custom-styles-variants

<style type="text/css">
  {`
    .btn-flat {
      background-color: purple;
      color: white;
    }

    .btn-huge {
      padding: 5rem 10rem;
      font-size: 1.5rem;
    }

    .btn-small {
      padding: 0.2rem 0.2rem;
      font-size: 12px;
    }
  `}
</style>

<Button variant="flat" size="huge">
  Hello World
</Button>
<Button variant="flat" size="small">
  Hello World
</Button>

,

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

请参阅https://react-bootstrap.github.io/getting-started/theming/

在您的示例中，我将创建一个单独的文件，例如./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导入的单独文件。