如何更改子元素的按钮图标颜色

Question

我有一个带 closeButton 的 Modal.Header（默认为白色），我想将其颜色更改为黑色。

该组件的代码是：

const inlineStyles = {

      header: {

        padding: '18px',

        margin: 0,

        backgroundColor: '#F2F3F4',

      },

<Modal.Header style={inlineStyles.header} closeButton >

呈现的 X 按钮的 HTML 如下所示： <button type="button" aria-label="Close" class="close237497"></button>

Answer 1

跟随这个文件React-Bootstrap。当你传入一个closeButton propintoModalHeader时，按钮就会有 class is close。因此，您可以像这样覆盖该类：// create a file to override CSS bootstrap (override.css)// override style of closeButton ModalHeader.close {&nbsp; &nbsp;color: #fc0303 !important // red&nbsp; &nbsp;// orther style}import ModalHeader from 'react-bootstrap/ModalHeader';import "./override.css";// use ModalHeader<ModalHeader closeButton />

Answer 2

使用你的风格道具Modal.Header来设置风格，button像这样<button&nbsp;type="button"&nbsp;aria-label="Close"&nbsp;style={this.props.style}></button>