Now, this guide is going to be focused around adding custom modal styles and part of the reason why I'm wanting to do this is because the recommended approach for adding styles and style overrides to the modal is to put them in line in the actual component itself, as opposed to adding the styles to a style sheet.

And the main reason for that is because whenever you add your inline styles, if you remember the nature of CSS, of cascading style sheets, is the inline styles always take priority on any other style definition that's out there.

So it means that these styles and these rules we're going to apply are going to be the ones that override the defaults that are provided by the library itself.

So, if I click on this, you can see we have a number of issues. One, the modal takes up almost the entire page, which kind of kills the entire point of having a modal. If we wanted something to take over the entire page, we could just create a dedicated page for that content.

So instead, I'd like to shrink it. I don't want it to take up the full height of the window and I want add a few custom styles like that. I also don't like this white background, I'd rather darken that overlay a little bit.

So we're gonna walk through how to apply all of those styles here, and it's also going to give you some good practice for writing your styles with the JSX syntax. So, let's get started with that.

I'm going to start here by coming up and let's give ourselves a fully wrapped-up object. I'm gonna say this, and this is in the constructor, this.customStyles equals and this is going to be our custom style object.

blog-modal.js

export default class BlogModal extends Component {
  consturctor(props) {
    super(props);

    this.customStyles = {

    }
  }

Now, the way that this works with React modal is everyone of the classNames is its own object and then you can pass custom styles to that object, so that's where we're gonna work through. The two classNames we're gonna work with are the content and the overlay classes.

Now, once again, the only way I know this is because I've read the documentation and you can, as well. Let's first look at the content class and we're gonna say, content and then remember every className with these types of inline styles is going to be an object.

So, here, I'm going to say top, and I want the top to be 50% from the top, so we make sure you wrap that up in a string. All of the syntax that we're writing now is going to revolve around what's required to write inline styles with JSX.

I'm gonna say top, left, we'll have that be 50% as a string, and then right is gonna be auto and then from here, let's add some margin, I add margin right and this one's going to be -50%, and then let's transform. So I'm gonna say transform and then translate, we'll go with -50% and -50%, and then just one last item, which will be the width. So we want the width to be 800 pixels wide.

this.customStyles = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%,
    width: "800px"
  }
};

Now hit save, and now we have to call these custom styles, so I'm going to come down here and this going to be a prop for the modal. So I'll say style equals this.custom styles, just like that, and that should apply our various rules we gave right here. These all have to deal with how sizing works with the modal.

<ReactModal
        style={this.customStyles}
        onRequestClose={() => {
          this.props.handleModalClose();
        }}

Let's go take a look at it. If you click on open modal now, you'll see this size is much better. This is giving us exactly what we're looking for for that modal size. This looks more like a real modal and less like something that took over the entire page.

Now that we know that's working, now let's add the overlay affect. What I want do is darken all of the area around the modal, so that everything else looks like it has some kind of darkness filter on it.

So, you can still see it, but it'll just look like it is much darker, where right here it looks like we're kinda whiting it out, so let's add that. This is a different class, so at the very end of the content object here, I'm going to say overlay and then give just one rule is all we need here, I'm just going to say backgroundColor and then this is as a string, rgba, then just one, one, one, and then lastly is the opacity, which is 75% or 0.75 and that is all we need to add in there.

overlay: {
  backgroundColor: "rgba(1, 1, 1, 0.75%)
}

Once again, rgba is simply, if you really haven't used it a lot, I know we mainly use hexadecimal color schemes here, but the nice thing about rgba is it gives you a fourth argument here that allows you to pass in the opacity, which, in this case, is going to give us a black color, that's what one, one, and one will do, but the .75 is gonna say I want the black color, but I want you to be able to see through it a little bit.

Let's go test this out, if you come click open modal now, you'll see we have that nice, dark overlay around the modal. You can still see everything, you can tell that page is still back there, but now we have the modal really standing out and I think this looks great.

So, in review, we can pass custom styles as inline properties directly to React modal and you can do this for any of your own components as well. I just personally prefer to use the style sheets, but that's up to you.

But whenever we're using a tool, a third party tool, like React modal, the recommended approach is to pass in our custom overrides directly inline to make sure that none of the defaults override our code, and then from there, we applied the styles to the content class and to the overlay class.

And, once again, all of this code is directly in the documentation. I brought it in earlier when I was planning this and I made a few changes so that it had the look and feel I was looking for, but the high-level code is in the set of examples if you want to explore that as well.

Resources

• Source code