如何设置 React Modal 边框半径

Question

如何更改 react-modal 的边框半径，我已将 className Modal 指定给组件并定义了 class 的样式，但是似乎对模态没有任何影响

<Modal
            className='Modal'
            isOpen={!!this.props.selectedProject}
            contnetLabel='Selected Option'
            onRequestClose={this.props.clearProjects}
            ariaHideApp={false}
            closeTimeoutMS={1000}
        >
</Modal>

SASS :

.Modal {
font-family: Raleway;
background-color: #242222;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90vh;
width: 50vw;
margin-right: -50%;
color: white;
border-radius: 400px;

h3 {
 color: white;
}
}

Website link 模态框在我的项目部分

Answer 1

您应该添加 overflow property.

.Modal {
  ...
    overflow: hidden;
  ...
}

Answer 2

有一个道具叫做 contentClassName 添加具有唯一名称和样式 sheet 的此类名称，独立使用该名称作为选择器并给出属性 border-radius : desired px;

这里的contentClassName提供了className给modal-content，它覆盖了你整个ModalHeader、body和Footer

例如

<Modal contentClassName="custom-modal"></Modal>

style.scss

.custom-modal { border-radius: 10px !important; }

如何设置 React Modal 边框半径

How To Set React Modal border radius

javascript

css

reactjs

react-modal