custom css style not work in React Bootstrap

Question

<Button type="submit" className="Form__Button mr-20">Sign In</Button>

I'm working on jsx file, I want to add custom style for above Button if I try this

{<style type="text/css">
  {`
   .Form__Button {
      background-color: #52C4B9;
      color: white;
      border: none;
      outline: none;
      border-radius: 25px;
    }
  `}
</style>

But if I use style in a different css file it not work

You can put this style in another css file and import it or you can use inline style — Shubham Verma
– Shubham Verma, Commented Mar 16, 2020 at 6:55

Raj · Accepted Answer · 2020-03-16 08:28:10Z

1

Option 1:

Create a new file called "App.css" and insert some CSS code in it:

.Form__Button {
   background-color: #52C4B9;
   color: white;
   border: none;
   outline: none;
   border-radius: 25px;
}

In your JSX file:

import './App.css';

Option 2:

class MyHeader extends React.Component {
  render() {
    const myButton = {
      background-color: #52C4B9;
      color: white;
      border: none;
      outline: none;
      border-radius: 25px;
    };
    return (
      <div>
      <Button type="submit" style={myButton}>Sign In</Button>
      </div>
    );
  }
}

answered Mar 16, 2020 at 8:28

Raj

9801 gold badge11 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

custom css style not work in React Bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related