How do I apply custom CSS to Modal dialog - React-bootstrap

Question

I am new to React here and I am trying to apply CSS to a Modal dialog.

I've created a css file: /css/mycss.css

/css/mycss.css

.test {
    width: 90%;
    color: red;
}

At the root level, I have my modal dialog JSX file:

MyModal.jsx

//more code above
<Modal
   {...this.props}
   show={this.state.show}
   onHide={this.hideModal}
   dialogClassName="test"
>
//more code below

As I understand it, I'm supposed to use the dialogClassName prop to apply CSS to the modal dialog. I'm trying to access the class selector in my CSS file and pass it into the prop as shown.

Do I have to import the CSS?

import test from '/css/mycss.css';

That didn't work. What do I do to get the CSS to show?

Edit:

I've tried

import styles from './css/mycss.css'; // dialogClassName='styles.test';
import { test } from './css/mycss.css'; // dialogClassName='test';
import .test from './css/mycss.css'; // dialogClassName='test';
import {.test} from './css/mycss.css'; // dialogClassName='.test';
import './css/mycss.css'; // dialogClassName='test';

None of that applies the CSS.

Edit 2:

I tried import styles from './css/mycss.css' again and then did dialogClassName = {styles.test};. That actually worked...but sort of. The text colors did change to red but the width of the Modal dialog is still pretty stagnant. It is not 90% of the screen or 10% of the screen no matter what I change the width attribute to. So first, why was the tutorial I was following telling me to pass a string to dialogClassName? And how do I get the width of the modal dialog to change?

@Mardzis I'm not sure how to do that properly. I tried what I had written in my post. I also tried import { test } from '/css/mycss.css' and import .test from '/css/mycss.css' and import { .test } from '/css/mycss.css'. None of them work. — noblerare
– noblerare, Commented Nov 19, 2016 at 19:34
Re: questions on your Edit 2, import on css are done and parsed by webpack css-loader and it saves css into object that's why you need to use variable on dialogClassName — jpdelatorre
– jpdelatorre, Commented Nov 19, 2016 at 20:00
Makes sense but I was following this documentation: react-bootstrap.github.io/components.html#modal-custom-sizing and the dialogClassName takes a string which threw me off. — noblerare
– noblerare, Commented Nov 19, 2016 at 20:02
If you are new and just starting out in react and don't want to worry about other stuff like webpack, you might want to take a look at github.com/facebookincubator/create-react-app It lets you focus on building your app. — jpdelatorre
– jpdelatorre, Commented Nov 19, 2016 at 20:02

Martin Jinda · Accepted Answer · 2016-11-19 20:55:58Z

1

You said that you are using webpack. If you don't have installed css loader.

npm install css-loader --save-dev

Now you can import your partial CSS files in React components. This example is when you have CSS files in the same direction as a js file.

import componentStyle from './componentStyle.scss';

There are more way how to import css files. This I use because you can go inside the file like this: className={componentStyle.classInside}.

Webpack example:

module.exports = {
   module: {
     loaders: [
       { test: /\.css$/, loader: "style-loader!css-loader" }
     ]
   }
};

Also, you can use SASS, LESS, etc. in the same way.

answered Nov 19, 2016 at 20:55

Martin Jinda

48810 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

noblerare Over a year ago

Yup, I have webpack and I apparently had the css-loader already installed so I just needed that middle portion of your answer in order to make it work. Thank you!

jpdelatorre · Accepted Answer · 2016-11-19 19:44:40Z

0

Try import './css/mycss.css';

Path should be relative to the file.

answered Nov 19, 2016 at 19:44

jpdelatorre

3,6031 gold badge22 silver badges25 bronze badges

4 Comments

noblerare Over a year ago

That didn't work. In dialogClassName do I simply put the name of the class that I want to apply (which in my case is test)? The path is correct.

jpdelatorre Over a year ago

Are you using any bundler like webpack? Another alternative is to just import the css file in your index.html file.

noblerare Over a year ago

I am using webpack. Okay, so I tried something new and it "kind of" worked. Edited my original post.

Martin Jinda Over a year ago

You also need a css loader if you are using webpack

Hultan · Accepted Answer · 2020-08-11 19:18:08Z

0

In .js file

import classes from './style.css';
dialogClassName= {classes.myModalStyle} as Modal attribute

In style.css

.myModalStyle{
    width: 90%,
    max-width: none!important;
}

Note: max-width: none!important is the most important part. Without it, resizing the width won't work

edited Aug 11, 2020 at 19:18

Hultan

1,5691 gold badge15 silver badges30 bronze badges

answered Aug 11, 2020 at 14:23

Mohit Rajput

411 silver badge3 bronze badges

Collectives™ on Stack Overflow

How do I apply custom CSS to Modal dialog - React-bootstrap

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related