How To Use SCSS In React

Here, we learn how to use SCSS in react.js.

First, open react application and install the sass plugin in that.

npm i sass

Then create App.scss file and import this file into App.js.

import './App.scss';

Then we create a root selector.

$primary:rgb(76, 105, 103);

In scss, we give hover or any else CSS element, which shows below.

.button {
   .....

    &:hover {
      background-color: white;
      color: $primary;
      border-color: $primary;
    }
}

Now add input filed and button element use in App.js.

import './App.scss';

function App() {
  return (
    <div className="App">
      <div>
        <input type='text' name='name' placeholder='Enter Name' />
      </div>
      <div>
        <button type='button' className='button'>
          React
        </button>
      </div>
    </div>
  );
}

export default App;

Now add CSS in App.scss file.

$primary:rgb(76, 105, 103);

.App {
  text-align: center;
  margin: 200px;

  input {
    padding: 10px 20px;

    &:focus {
      border: 1px solid $primary !important;
      box-shadow: 0px 0px 5px 5px $primary;
    }
  }

  .button {
    margin-top: 20px;
    padding: 10px 15px;
    font-size: 20px;
    color: white;
    background-color: $primary;
    border-color: $primary;
    font-weight: bold;

    &:hover {
      background-color: white;
      color: $primary;
      border-color: $primary;
    }
  }
}

Output:-