css - 在 ReactJS 中覆盖 css 类

Question

我需要自定义一些 React 类的 css。在这种情况下，我的目标是使用此 css(一条没有背景的直线)以一种形式显示输入:

.text-line {
background-color: transparent;
color: #eeeeee;
outline: none;
outline-style: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid #eeeeee 1px;
padding: 3px 10px;
}

我尝试过添加内联 css 或创建自定义类，但似乎没有任何效果。

<Form>
    <Form.Group controlId="formBasicEmail">
        <Form.Label>Phone number, email or username</Form.Label>
        <Form.Control type="email" placeholder="Enter email" onChange={this.handleUsernameChange} value={this.state.username} />
    </Form.Group>
</Form>

有没有一种方法可以清除覆盖 react 默认的 css 类？我还在 npm 中加入了 react-bootstrap。

Answer 1

如图in the documentation ，你可以像这样提供一个 css 类(在 React 中称为 className):

<Form>
  <Form.Group controlId="formBasicEmail">
    <Form.Label>Email address</Form.Label>
    <Form.Control type="email" placeholder="Enter email" />
    <Form.Text className="text-muted">
      We'll never share your email with anyone else.
    </Form.Text>
  </Form.Group>
</Form>

您需要像这样导入 css 文件:

import "example.css";