[英]How can I apply the css only to this component in React?
I have a small issue using the React modals from Bootstrap in my app.我在我的应用程序中使用 Bootstrap 的 React 模态有一个小问题。
In index.hmtl, I import this:在 index.hmtl 中,我导入了这个:
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/bootstrap-theme.min.css">
However, it applies the CSS to absolutely everything in my app.但是,它将 CSS 应用于我应用程序中的所有内容。 I don't want this since it breaks the whole style.
我不想要这个,因为它破坏了整个风格。 I can't really custom all the classes from Bootstrap in my component, so I would need to find a way to only apply these styles to my component that is the modal.
我无法真正自定义组件中 Bootstrap 中的所有类,因此我需要找到一种方法仅将这些 styles 应用于我的模态组件。
Here is my modal:这是我的模态:
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
import Form from 'components/forms/Form';
import FileInput from 'components/forms/FileInput';
function PicturesUploadModal (props) {
const { t } = useTranslation('common');
return (
<Modal show={props.modalOpen} onHide={props.handleClose}>
<Modal.Header closeButton>
<Modal.Title>{ t('addPictures') }</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{ t('numberPics') } {30 - props.images.length}</p>
<input type="file" onChange={props.handleChange} multiple />
{(props.error === true) && <p className="alert alert-danger">{t('filesErrors')}</p>}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={props.handleClose}>
{ t('close') }
</Button>
<Button variant="primary" onClick={props.handleSubmit}>
{ t('sendSave')}
</Button>
</Modal.Footer>
</Modal>
);
}
export default PicturesUploadModal;
So, how can I make sure the the styles imported sooner are ONLY applied to the Modal component?那么,如何确保较早导入的 styles 仅适用于 Modal 组件?
Thanks!谢谢!
I suggest you use this awesome library since it's just the modal you are implementing: react-modal will solve your issue, that way bootstrap doesn't mess your styles.我建议你使用这个很棒的库,因为它只是你正在实现的模式:react-modal 将解决你的问题,这样引导程序就不会弄乱你的 styles。 Here is the link for the npm package: https://www.npmjs.com/package/react-modal
这是 npm package 的链接: https://www.npmjs.com/package/react-modal
Try to add a class and write css ontop this尝试添加一个 class 并在上面写 css
<Modal show={props.modalOpen} onHide={props.handleClose} className: 'your-class'>
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import styled from 'styled-components'; // Import this
import { useTranslation } from 'react-i18next';
import Form from 'components/forms/Form';
import FileInput from 'components/forms/FileInput';
const Styles = styled.div`
.yourclassName{
margin: 2px;
}
`
function PicturesUploadModal (props) {
const { t } = useTranslation('common');
return (
<Styles>
<div className="yourclassName">Modal</div>
<Modal show={props.modalOpen} onHide={props.handleClose}>
<Modal.Header closeButton>
<Modal.Title>{ t('addPictures') }</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{ t('numberPics') } {30 - props.images.length}</p>
<input type="file" onChange={props.handleChange} multiple />
{(props.error === true) && <p className="alert alert-danger">{t('filesErrors')}</p>}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={props.handleClose}>
{ t('close') }
</Button>
<Button variant="primary" onClick={props.handleSubmit}>
{ t('sendSave')}
</Button>
</Modal.Footer>
</Modal>
</Styles>
);
}
export default PicturesUploadModal;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.