[英]Change the style of a modal using react-modal
我有这个对象,具有我想要的模态样式:
const customStyles = {
content: {
top: '35%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
width: '60%',
transform: 'translate(-40%, -10%)',
},
};
然后我将这些样式传递给模态,如下所示:
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
style={customStyles}
>
它工作正常,但我想传递一个类,而不是在组件内创建 customStyle 对象。
我尝试这样的事情,首先创建模态类:
.modal {
top: '35%';
left: '50%';
right: 'auto';
bottom: 'auto';
marginRight: '-50%';
width: '60%';
transform: 'translate(-40%, -10%)';
}
接着:
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
className="modal"
>
但它没有用。 我究竟做错了什么?
我认为可能有十亿种方法可以做到这一点,这只是使用CSS模块的一种。 如果将样式放入单独的.css.js文件中,则可以将其导入模块中:
/// modal.css.js ///
export default {
modal: {
top: '35%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
width: '60%',
transform: 'translate(-40%, -10%)'
},
greenText: {
color: 'rgb(0,255,100)'
},
style3: {
marginRight: '-25%'
}
}
然后,您可以像访问任何对象一样通过访问样式来分配样式,并将其应用于style属性上的组件
import styles from './modal.css.js'
...
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
style={styles.modal}
>
如果要对组件应用多种样式,请为style属性提供一个数组。 这将允许您从多个导入的样式对象中应用样式。
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
style={[styles.modal, styles.greenText]}
>
它应该是portalClassName:
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
portalClassName="modal"
>
<ReactModal id={this.state.dialogId}
isOpen={showDialog}
onRequestClose={this.onCancel.bind(this)}
className={`shadow p-4`}
style={{
overlay: {
position: 'fixed',
zIndex: 1020,
top: 0,
left: 0,
width: '100vw',
height: '100vh',
background: 'rgba(255, 255, 255, 0.75)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
content: {
background: 'white',
width: '45rem',
maxWidth: 'calc(100vw - 2rem)',
maxHeight: 'calc(100vh - 2rem)',
overflowY: 'auto',
position: 'relative',
border: '1px solid #ccc',
borderRadius: '0.3rem',
}}}
appElement={document.getElementById('root') as HTMLElement}> ... </ReactModal>
我试过这种方式,它对我来说很好用我在反应模态标签中添加了一个简单的类
<Modal
size="sm"
aria-labelledby="contained-modal-title-vcenter"
className='modalStyle'
centered
show={prescriptionPreview}
onHide={() => setPrescriptionPreview(false)}
>
然后我去了 app.css 并像这样选择
.modalStyle .modal-dialog
并随心所欲地设计它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.