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

我有一个带有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>

最佳答案

跟随React-Bootstrap的this文件。当您将closeButton prop传递给ModalHeader时，按钮的类将为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 />