Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to override a style of a library component in React app css?

EDIT: Here’s stackblitz for example app
EDIT 2: See my answer for simple solution

I have a React component that shows an alert component with the scss.

export function MyComponent() {
  return (
     <div className={styles.alert}>
       <ModusAlert message={'Some message'}></ModusAlert>
     </div>
  );
}

MyComponent.module.css

.alert {
  width: 390px;
  margin-top: 182px;
  margin-bottom: 22px;
}

Now I need to change color and background-color among other things. When I look at the style in DevTools for the label inside the alert there’s a style below.

Style in DevTools:

div.alert .message {
    font-size: 0.875rem;
    font-weight: 700;
}

Editing that style in DevTools to the style below changes the appearance of the web page.

Edited style in DevTools (changes appearance):

div.alert .message {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
}

However, if I add that style from DevTools to my component’s CSS, it doesn’t work.

Edited style from DevTools added to CSS (does NOT change appearance):

div.alert .message {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
}

So how this should be done? Below is the element style for div that contains the message of alert:

enter image description here

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    In this case the easiest way to override the alert color seems to be setting the css custom properties / css variables used in the 3rd party library. The appropriate variables can be found from the component style file. So changing the existing style in MyComponent.module.css:

    .alert {
  width: 390px;
  margin-top: 182px;
  margin-bottom: 22px;
  --modus-alert-primary-color: white;
}

  2. 0

    you can override a css with make a selector more precise than the one you want override, or with the key-word "important".
    (if I correctly understand the problem you ask)

    /* selector more precise for the div */
div.alert:has(>.message) { color: white; }

/* important */
div.alert { color: white !important; }
    Login or Signup to reply.
  3. 0

    Can you please check the below solution? Hope it will work for you.

    You have written CSS code in MyComponent.module.css, which is intended to work only in the elements of the same component. However, you have used the ModusAlert library for the alert, which is another component.

    To resolve this, you need to move your custom CSS related to ModusAlert into the global CSS/SCSS file such as global.css or global.scss, rather than any other *.module.css file.

    Login or Signup to reply.
  4. 0

    First of all, you must know about Shadow DOM and its usage. This Modus library I think was developed by using Shadow DOM to avoid CSS conflict and you are so lucky because its Shadow DOM is open and by using JS PATH it would be possible to have some styles modification. So, if you want to modify the styles you must use the following trick:

    // Use a JS PATH to reach the container of the `shadow root`
// Your case is like the following

const alertWrapper = document.querySelector("#root > div.my-alert > modus-alert");

const alertContent = alertWrapper.shadowRoot.querySelector('div.alert .message');

alertContent.style.color = 'red';

    For more information have a look at this post

    — Update (based on the reproduction link):

    You need to use an useEffect to implement your change, pay attention the following code:

    import { ModusAlert } from '@trimble-oss/modus-react-components';
import './MyComponent.css';
import { useEffect } from 'react';

function overrideStyle(): void {
  // Use a JS PATH to reach the container of the `shadow root`
  // Your case is like the following
  const alertWrapper = document.querySelector(
    '#root > div.my-alert > modus-alert'
  );
  const alertContent =
    alertWrapper?.shadowRoot?.querySelector('div.alert .message');

  if (alertContent) {
    (alertContent as any).style.color = 'red';
  }
}

function MyComponent() {
  useEffect(() => {
    overrideStyle();
  }, []);
  
  return (
    <div className="my-alert">
      <ModusAlert message={'Style of this should be overridden'}></ModusAlert>
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search