How do I change a bootstrap class' sass property in react?-CodePudding

to clarify I'm using react-bootstrap and trying to use bootstrap. I have the following:

import React from 'react'

// bootstrap
import { Button } from 'react-bootstrap';

const MainDisplay = () => {
  return (
    <div className='MainDisplayContainer'>

        <div className='Header'>
            <button>Header</button>
        </div>

        <div className='Body'>
            body
        </div>

        <div className='Footer'>
            footer
        </div>

    </div>
  )
}

export default MainDisplay

and this is the sass:

@import "~bootstrap/scss/bootstrap";

.Header{
    button{
        @extend .btn;
    }
}

.Body{

}

.Footer{

}

Essentially if I were to do this inline it would simply be:

<button className='btn btn-info'>Header</button>

but how would I do this in the sass file?

CodePudding user response：

Not really understanding what you're needing to change in the SASS file but per your button example in React Bootstrap per the docs if you want:

<button className='btn btn-info'>Header</button>

you would use the variant info:

<Button variant="info">Header</Button>