如何修改React-Bootstrap中CloseButton组件的宽高？

你尝试用自定义className设置CloseButton的宽高但样式未生效，问题出在React-Bootstrap的CloseButton（对应原生.btn-close类）自带的默认CSS优先级可能比你的自定义样式高，或者样式加载顺序不对。可以试试以下几种方法：

方法1：提高选择器优先级 #

用更具体的CSS选择器覆盖默认样式，结合组件自带的.btn-close类：

.crossBtn.btn-close {
    height: 37px;
    width: 32px;
}

如果还是不生效，可临时用!important强制覆盖（注意尽量少用，避免后续样式冲突）：

.crossBtn.btn-close {
    height: 37px !important;
    width: 32px !important;
}

方法2：使用内联样式 #

直接给组件添加内联样式，内联样式优先级高于外部CSS：

<CloseButton style={{ height: '37px', width: '32px' }} className="crossBtn" />

方法3：检查样式加载顺序 #

确保你的自定义CSS文件是在React-Bootstrap的样式文件之后引入的，这样自定义样式才能正确覆盖默认样式。

内容的提问来源于stack exchange，提问作者Keerthi