How to apply styles using mergeStyles or makeStyles to the DOM element which is loaded dynamically

[makarandkeer]

Hello,

I have a DIV which loads the DOM elements dynamically and I wanted to apply style to selected DOM element. For example I wanted to apply style for <p>, <ul> and other elements.

How can I do it, I tried with following code, but it seems to be deprecated

const containerStyle = mergeStyles({
  selectors: {
    p: {
      // Automatically applies to all <p> tags
      "margin-bottom": "1em", // Add space after each <p>
    },
    ul: {
      "margin-bottom": "1em", // Add space after each <ul>
      "padding-left": "1", // Indent <ul> content
    },
  },
});

[pradeept95]

Hi @makarandkeer ,

you can use makeStaticStyles to achieve this. Here is the example: https://stackblitz.com/edit/teorhb?file=src%2Fexample.tsx

More about makeStaticStyles:
https://griffel.js.org/react/api/make-static-styles

import { makeStaticStyles } from '@griffel/react';

const useStaticStyles = makeStaticStyles({
  '@font-face': {
    fontFamily: 'Open Sans',
    src: `url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
         url("/fonts/OpenSans-Regular-webfont.woff") format("woff")`,
  },
  body: {
    backgroundColor: 'red',
  },
});

function App() {
  useStaticStyles();

  return <div />;
}

[spmonahan]

I don't think you need to do anything special when using makeStyles with dynamically loaded elements. makeStyles simply returns an object with CSS class names. You just need to apply those correctly.

This is a basic example but I think you could see how to apply it actual lazy-loaded components and the like: https://stackblitz.com/edit/ypdn1d?file=src%2Fexample.tsx