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

Question

I have a Modal.Header with a closeButton (which is white by default) and I want to change its color to black.

The code for the component is:

const inlineStyles = {
      header: {
        padding: '18px',
        margin: 0,
        backgroundColor: '#F2F3F4',
      },

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

The HTML of the rendered X-button looks like: <button type="button" aria-label="Close" class="close237497"></button>

Answer 1

Follow with this file of React-Bootstrap . When you pass a closeButton prop into ModalHeader , the button will has class is close .

So, you can override that class like this:

// 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的 style 道具在button设置样式，如下所示

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