来自 css 的样式 react-bootstrap 按钮

Question

我对 React 和 JavaScript 总体上是相当陌生的。

我正在使用来自 https://react-bootstrap.github.io/components/buttons/的 react-bootstrap 中的按钮，但我想在我的 React 应用程序中从我的 css 文件中设置按钮的样式，但它似乎不适用。

我的主页.js文件看起来像

import React from "react";
import '../App.css'; // Reflects the directory structure
export default function Home() {
return (
<div>
<h2>Home</h2>
<Button variant="light" className="formButtons">
</div>
)
}

我的应用.css文件看起来像

.formButtons {
margin: 10;
overflow-wrap: break-word;
color: red;
}

我可以说它不适用，因为文本颜色不是红色。

提前感谢！

Answer 1

首先，您需要从react-bootstrap导入 Button 元素。你可以写这样的东西：

import Button from 'react-bootstrap/Button'

之后，你可以删除 className 属性，因为 React Bootstrap 以你可以依赖的一致方式构建组件 classNames。您可以根据 variant 属性设置样式，因此请尝试如下操作：

首页.js

import React from "react";
import Button from 'react-bootstrap/Button'
import '../App.css'; // Reflects the directory structure
export default function Home() {
return (
<div>
<h2>Home</h2>
<Button variant="light">TEXT</Button>
</div>
)
}

应用.css

.btn-light {
margin: 10;
overflow-wrap: break-word;
color: red;
}