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

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

跟随this React-Bootstrap 文件。当您将 closeButton 属性 传递给 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 />