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。