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

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