如何更改react-bootstrap中关闭按钮的高度和宽度？

Question

<CloseButton className="crossBtn"/>
.crossBtn{
    height:37px;
    width:32px;
}

如何更改关闭按钮的宽度和高度？如果我这样写，它就不会改变。

Answer 1

你使用外部CSS文件吗？如果是这样，您的外部可能会在引导程序样式之前被调用，因此它会被覆盖。

你可以试试这个：

import Button from 'react-bootstrap/Button';

function VariantsExample() {
  return (
    <>
      <style type="text/css">
        {`
    .btn-close {
      width: 2em;
      height: 2em;
      border: 1px solid red;
    }
    `}
      </style>

      <CloseButton />
    </>
  );
}

export default VariantsExample;

然后导入您的自定义按钮而不是 Bootstrap 按钮。