无法为弹出模式添加边框答案

【问题标题】：unable to add a border to popup modal无法为弹出模式添加边框
【发布时间】：2021-06-16 10:08:56
【问题描述】：

我正在使用 reactjs-popup 库中的 Popup 模态组件。

export default () => (
  <Popup
    trigger={<button className="button"> Guide </button>}
    modal
    nested
  >
    {(close: any) => (
      <div className="modal">
        <button className="close" onClick={close}>
          &times;
        </button>
        <div className="header"> Guide </div>
        <div className="content">
          {' '}
      
          <img src={img} alt="charts" className="charts" />
          What is overfitting?
          <br />
          What is underfitting?
          This example demonstrates the problems of underfitting and overfitting and how we can use linear regression with polynomial features to approximate nonlinear functions.
        </div>
        <div className="actions">
        </div>
      </div>
    )}
  </Popup>
);

它是这样的：

我想为弹出组件添加一个粗黑边框。我该怎么做？我当前的 css 似乎不起作用。

.modal {
    font-size: 12px;
    border-color: black;
    border-radius: 100px;
  }

【问题讨论】：

看看你是如何在.modal > .header 中定义边框（显示出来的）的。尝试重用该代码，然后根据您的预期结果进行更改。

标签： javascript html css reactjs typescript

【解决方案1】：

您需要设置border-style: solid; 默认为none。（也可能是border-width）

【讨论】：

【解决方案2】：

添加：边框：solid 1px #000;

.modal {
    font-size: 12px;
    border-radius: 100px;
    border: solid 1px #000;
  }

【讨论】：