如何在 React 中仅将 css 应用于此组件？答案

【问题标题】：How can I apply the css only to this component in React?如何在 React 中仅将 css 应用于此组件？
【发布时间】：2020-12-16 00:03:42
【问题描述】：

我在我的应用程序中使用 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 中的所有类，因此我需要找到一种方法仅将这些样式应用于我的模态组件。

这是我的模态：

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;

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

谢谢！

【问题讨论】：

所以您打算导入整个引导程序样式只是为了设置模态样式？您可能想修改该计划...

标签： javascript css reactjs twitter-bootstrap

【解决方案1】：

我建议你使用这个很棒的库，因为它只是你正在实现的模式： react-modal 将解决您的问题，这样引导程序就不会弄乱您的样式。这是 npm 包的链接：https://www.npmjs.com/package/react-modal

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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;

【讨论】：