如何更改 bootstrap class' sass 属性反应？

Question

澄清我正在使用 react-bootstrap 并尝试使用 bootstrap。我有以下内容：

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

这是 sass:

@import "~bootstrap/scss/bootstrap";

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

.Body{

}

.Footer{

}

本质上，如果我要内联执行此操作，它只会是：

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

但是我如何在 sass 文件中执行此操作？

Answer 1

不太了解您需要在 SASS 文件中更改什么，但如果您愿意，可以根据 React Bootstrap 中的 button 示例根据 docs 进行更改：

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

您将使用变体信息：

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

如何更改 bootstrap class' sass 属性反应？

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

html

css

sass

reactjs

如何更改 bootstrap class' sass 属性 反应？

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

html

css

sass

reactjs

如何更改 bootstrap class' sass 属性反应？