css - reactstrap 组件的 css 文件中的选择器

Question

我想实现什么

所以我的超大屏幕和页脚之间有一个空隙。我想消除这个差距。我已经通过将 margin-bottom 设置为 0px 成功地做到了；但在那一刻，我不得不将一个 ID 传递给 Jumbotron 元素。现在我想在不传递 ID 的情况下实现相同的效果，但要使用类。

我不想使用内联样式。我想把它放在一个单独的 css 文件中。

在旧库中(react-bootstrap 而非 reactstrap)，我可以选择特定类型的所有组件，就像我在下面提供的 css 中所做的那样。

所以错误很可能是css文件中的选择器。我在网上找不到任何以单独的“css 文件”方式专门显示它的东西。仅使用内联样式。

MainContent.js

import React from 'react';
import './MainContent.css';
import { Jumbotron, Button, Form, FormGroup, Label, Input, Container } from 'reactstrap';

const MainContent = () => {
    return (
        <Container>
            <Jumbotron>
                <Form>
                    <FormGroup>
                        <Label for="exampleEmail">Email</Label>
                        <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
                    </FormGroup>
                    <FormGroup>
                        <Label for="examplePassword">Password</Label>
                         <Input type="text" name="password" id="examplePassword" placeholder="password placeholder" />
                    </FormGroup>
                    <Button>Submit</Button>
                </Form>
            </Jumbotron>
        </Container>
    );
}

export default MainContent;

MainContent.css

.Container {
   margin-bottom: 0px;
}

.Jumbotron {
    margin-bottom: 0px;
}

Answer 1

如果您不想使用 ID 或内联样式来实现它，有一种方法我称之为 hack。

在MainContent.js中为组件添加className属性如下:

<Jumbotron className="jumbotron">

并且在 MainContent.css 中添加 !important 到你想要覆盖其他样式的语句中:

.Container {
    margin-bottom: 0px;
}

.Jumbotron {
    margin-bottom: 0px !important;
}

除非您像这样重写，否则将使用 node_modules/bootstrap/dist/css/bootstrap.css 中的 margin-bottom: 2rem。