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

Question

我查看了 docs 并且只能看到 size="lg" 较大，但我想要更大的图像显示：

图片：

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

我可以使用 react-bootstrap 或使用 css 来做这种更大的样式吗？我在四处搜索时找不到详细信息，我对此也有点陌生。如果文本输入和按钮更大，它们也应该很酷。

哦，是的，这是我的 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;

Answer 1

以下是自定义尺寸的文档：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>

Answer 2

是的，您通过 CSS 执行此操作。通过定义匹配组件的 css class 创建您自己的自定义尺寸，如下所述：

见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 导入这些文件。

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

How do I get create extra large Buttons in react-bootstrap not just `size="lg"`

size

button

reactjs

react-bootstrap