How to inject style into Modal component?

Question

I'm building a React app using Dart SASS. Things are generally going well and I particularly appreciate how the styles for each component are isolated to that component - ie. ComponentName.module.scss

But I've just built a new Modal component that is merely a wrapper for the popular react-modal component installable via npm.

What I'd ideally like to be able to do is pass in a className string that is merely a reference to an SCSS class in my parent component and have it override the default styles in Modal.jsx.

Example: I have a component called SignIn.jsx. It has a Forgot Password link that, when clicked, displays a modal to allow the user to enter their email address. What would be ideal is to be able to define an SCSS class in SignIn.module.scss and then pass into Modal.jsx this class when I call <Modal className={...myCustomClass} ... />

I actually have been able to accomplish this with a global SCSS class definition but haven't been able to figure out how to do so as I described above.

Is what I'm seeking to do possible? Are there any articles on how to do this?

`react-modal` already have `className` prop, so just pass className from Modal to react-modal — iamhuynq, Jul 15 '22 at 17:08

score 0 · Answer 1 · answered Jul 16 '22 at 17:02

While I appreciate @iamhuynq trying to help, there's much more that can be said, which will hopefully help others in the future.

To summarize the issue, imagine you're using TypeScript with React and have a parent component with a companion SCSS file:

ParentComponent.tsx
ParentComponent.module.scss

In this parent component you want to utilize a child component consisting of these files:

ChildComponent.tsx
ChildComponent.module.scss

You want the ability to inject a custom style into the ChildComponent. More precisely, you have an SCSS class defined in ParentComponent.module.scss that you want to be utilized by ChildComponent.tsx. To accomplish this, do the following in the child component:

import * as React from 'react';
import cx from 'classnames';

import styles from './ChildComponent.module.scss';
    
interface IChildComponent {
  className?: any; // Note: I tried more specific types but none of them worked
  children: React.ReactNode;
}

const ChildComponent = ({ className, children }: IChildComponent) => {
  return (
    // Your version of this content will necessarily be different
    <div className={cx(styles.childComponentMain, className)}>
      // More content here
    </div>
  );
};

export default ChildComponent;

With this approach I am able to inject a style defined in ParentComponent.module.scss into ChildComponent.tsx and have it amend to those styles already defined in ChildComponent.module.scss.

How to inject style into Modal component?

1 Answers1