CODEWITHSUNDEEP
javascriptcssreactjstwitter-bootstrap
NicolasSC
NicolasSC

Reputation: 384

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.

In index.hmtl, I import this:

<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. 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.

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?

Thanks!

Upvotes: 1

Views: 507

Answers (3)

Saura Mandal
Saura Mandal

Reputation: 59

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;

Upvotes: 0

Baiju
Baiju

Reputation: 61

Try to add a class and write css ontop this

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

Upvotes: 0

Alex Yepes
Alex Yepes

Reputation: 1195

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. Here is the link for the npm package: https://www.npmjs.com/package/react-modal

Upvotes: 1

Related Questions