Javascript 如何将css仅应用于React中的此组件？

在我的应用程序中使用Bootstrap中的React modals时出现了一个小问题

在index.hmtl中，我导入以下内容：

<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/bootstrap-theme.min.css">

然而，它将CSS应用于我应用程序中的所有内容。我不想要这个，因为它破坏了整个风格。我无法在我的组件中从引导中定制所有类，因此我需要找到一种方法，将这些样式仅应用于我的组件（即模态组件）

以下是我的观点：

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;

从“React”导入React；
从“反应引导/模式”导入模式；
从“反应引导/按钮”导入按钮；
从“react-i18next”导入{useTranslation}；
从“组件/表格/表格”导入表格；
从“组件/表单/文件输入”导入文件输入；
功能图片上传模式（道具）{
const{t}=usetransformation（'common'）；
返回(
{t（'addPictures'）}
{t（'numberPics'）}{30-props.images.length}

{（props.error==true）&&&
{t（'fileerrors'）}
}
{t（'close'）}
{t（'sendSave'）}
);
}
导出默认图片上传模式；

那么，如何确保较早导入的样式仅应用于模态组件

---

谢谢

我建议您使用这个很棒的库，因为它只是您正在实现的模式：

---

react-modal将解决您的问题，这样引导不会弄乱您的风格。下面是npm包的链接：

尝试添加一个类并在这个类上编写css

<Modal show={props.modalOpen} onHide={props.handleClose} className: 'your-class'>

从“React”导入React；
从“反应引导/模式”导入模式；
从“反应引导/按钮”导入按钮；
从“样式化组件”导入样式化；//导入这个
从“react-i18next”导入{useTranslation}；
从“组件/表格/表格”导入表格；
从“组件/表单/文件输入”导入文件输入；
const Styles=styled.div`
.你的类名{
保证金：2倍；
}
`
功能图片上传模式（道具）{
const{t}=usetransformation（'common'）；
返回(
情态动词
{t（'addPictures'）}
{t（'numberPics'）}{30-props.images.length}

{（props.error==true）&&&
{t（'fileerrors'）}
}
{t（'close'）}
{t（'sendSave'）}
);
}
导出默认图片上传模式；

那么您打算导入整个引导样式，只是为了创建一个模式？你可能想修改计划。。。

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;