Style react-bootstrap button from css

Question

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!

Have you used your document inspector to see if that rule is there and overridden by something else? It's a bit hard to diagnose without a demo. — isherwood
– isherwood, Commented Jan 8, 2020 at 19:53

Alex Ghirelli · Accepted Answer · 2020-01-08 20:29:26Z

3

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

answered Jan 8, 2020 at 20:29

Alex Ghirelli

663 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jimmyhuang0904 Over a year ago

My problem is that if I do <Button variant="light" style={{margin: 10}}> versus <Button variant="light"> with .btn-light { margin: 10px; } the .btn-light doesn't register the styling

Alex Ghirelli Over a year ago

@jimmyhuang0904 if you inspect the Button element which classes you see?

jimmyhuang0904 Over a year ago

after using .btn-light it works! When I inspect the Button element I see both classes, but I think className properties I set in formButtons were being overridden somehow

Collectives™ on Stack Overflow

Style react-bootstrap button from css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related