[英]How can I apply the css only to this component in React?
我在我的應用程序中使用 Bootstrap 的 React 模態有一個小問題。
在 index.hmtl 中,我導入了這個:
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/bootstrap-theme.min.css">
但是,它將 CSS 應用於我應用程序中的所有內容。 我不想要這個,因為它破壞了整個風格。 我無法真正自定義組件中 Bootstrap 中的所有類,因此我需要找到一種方法僅將這些 styles 應用於我的模態組件。
這是我的模態:
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;
那么,如何確保較早導入的 styles 僅適用於 Modal 組件?
謝謝!
我建議你使用這個很棒的庫,因為它只是你正在實現的模式:react-modal 將解決你的問題,這樣引導程序就不會弄亂你的 styles。 這是 npm package 的鏈接: https://www.npmjs.com/package/react-modal
嘗試添加一個 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.