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

Question

我有一个带有关闭按钮（默认为白色）的 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 的 this 文件。当您将 closeButton prop 传递给 ModalHeader 时，按钮将具有 class 是 close。

因此，您可以像这样覆盖 class：

// 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>

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

How to change a button icon color of a child element

html

javascript

css

modal-dialog

reactjs