Стиль реагирует на кнопку bootstrap от css - PullRequest
Новая
       4

Стиль реагирует на кнопку bootstrap от css

0 голосов
/ 08 января 2020

Я довольно новичок в React и JavaScript в целом.

Я использую кнопку от реакции - bootstrap от https://react-bootstrap.github.io/components/buttons/, но я хочу стилизовать кнопку на в моем приложении React из моего файла css, но, похоже, он не применяется.

my 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>
  )
}

My App. css файл выглядит как 

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

Я могу сказать, что он не применяется, поскольку цвет текста не красный.

Заранее спасибо!

1 Ответ

2 голосов
/ 08 января 2020

Прежде всего вам необходимо импортировать элемент Button из реаги- bootstrap. Вы можете написать что-то вроде этого: 

import Button from 'react-bootstrap/Button'

После этого вы можете удалить атрибут className, потому что React Bootstrap создает компонент classNames согласованным образом, на который вы можете положиться. Вы можете основывать свои стили на атрибуте варианта, поэтому попробуйте что-то вроде этого:

Home. 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;
}
...