时间戳

首页 > 解决方案 > 样式来自 css 的 react-bootstrap 按钮

css - 样式来自 css 的 react-bootstrap 按钮

问题描述

总的来说，我对 React 和 JavaScript 还很陌生。

我正在使用来自https://react-bootstrap.github.io/components/buttons/的 react-bootstrap的 Button 但我想在我的 css 文件中的 React 应用程序中设置 Button 的样式，但它似乎没有申请。

我的 Home.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>
  )
}

我的 App.css 文件看起来像

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

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

提前致谢！

标签： cssreactjsbuttonreact-bootstrap

解决方案

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

import Button from 'react-bootstrap/Button'

之后，您可以删除 className 属性，因为 React Bootstrap 以您可以依赖的一致方式构建组件 classNames。您可以将样式基于变体属性，因此请尝试以下操作：

主页.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;
}

推荐阅读