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

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 {

   color: #fc0303 !important // red

   // orther style

}

import ModalHeader from 'react-bootstrap/ModalHeader';

import "./override.css";

// use ModalHeader

<ModalHeader closeButton />

Answer 2

使用你的风格道具Modal.Header来设置风格，button像这样

<button type="button" aria-label="Close" style={this.props.style}></button>