score:0

you need to use makestyles in material ui and you can not use style or classes there :

import * as react from "react";
import { makestyles } from "@material-ui/core/styles";
const usestyles = makestyles(() => ({
  mybackground: {
    backgroundcolor: "yellow"
  },
  myborder: {
    border: "2px solid green"
  },
  myfont: {
    color: "red"
  }
}));

export default function index() {
  const styles = usestyles();
  return (
    <div classname={`${styles.myfont} ${styles.mybackground}`} maxwidth="sm">
      this is a test
    </div>
  );
}

it works for me very well.

code

score:1

according to the documentation, makestyles is deprecated and sx is the intended api for design. what about in cases where you need to use an html element? i am writing a component that requires "object" for displaying pdfs. so, how would i style this element?

import { box } from '@mui/material'

export default function index() {
  return (
   <box sx={{
    '& object': {
       backgroundcolor: "red",
       border: "2px solid green",
       color: "blue",
       maxwidth: 'md',
     }}}
    >
      <object/>
    </box>
  );
}

in this way, we can indirectly style any html element when needed. since the "box" component does not introduce any formatting of it's own, that would be the recommended way to implement this technique.

more can be found on this technique: https://mui.com/system/the-sx-prop/#array-values.

score:4

sx only works with mui component, not html element. so you need to replace div. you can use box instead.

<box sx={styles.mybackground}>
this is a test
</box>

for html element, use the style attribute, which for your case it's working correctly. for more https://mui.com/system/the-sx-prop/.


Related Query

More Query from same tag