CODEWITHSUNDEEP
cssreactjsbuttonreact-bootstrap
jimmyhuang0904
jimmyhuang0904

Reputation: 191

Style react-bootstrap button from css

I am fairly new to React and JavaScript in general.

I am using Button from react-bootstrap from https://react-bootstrap.github.io/components/buttons/ but I want to style the Button on top of it in my React app from my css file but it does not seem to apply.

my Home.js file looks like

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 file looks like

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

I can tell it does not apply since the text color isn't red.

Thanks in advance!

Upvotes: 1

Views: 3416

Answers (1)

Alex Ghirelli
Alex Ghirelli

Reputation: 66

First of all you need to import the Button element from react-bootstrap. You can write something like this:

import Button from 'react-bootstrap/Button'

After that, you can remove the className attribute because React Bootstrap builds the component classNames in a consistent way that you can rely on. You can base your styles on the variant attribute, so try something like this:

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

App.css

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

Upvotes: 3

Related Questions