Skip to content

MUI Note

Congrats on MUI new version#

  • @2021-09-17
  • Renaming from Material-UI to MUI
  • I was navigating to mui icon page with my Chrome Terminal command and I see a new UI and a new URL. For one second I thought my Chrome Terminal was down. But actually it is redirected from the material-ui. Will keep reporting bugs. Congrats to the team. I prefer the new website UI to the one before.
  • Just see that they changed to @mui . . . I'm staying with v4 and do the migration later (procrastinate)
  • Usually I don't move to the new version but this time MUI X and new styled, new sx props are giving me so many "illusions" of using it. I am actually considering migrating to v5.
  • Last straw: Strict Mode support
  • To use the drop down menu correctly with strict mode, I think I should move. Problem was on findDOMNode
  • At creating User Pool: if "email" is required, "unconfirmed" user cannot log in(sign in).

Migration from v4 to v5#

Fix Clicking Ripple Effect only half width#

  • @2021-09-20
  • Problem: Clicking Ripple only starts on the left half, not circle shape (ellipse).
  • Solotion: In my index.css file, it was set * {max-width:100%}. Changed it to 100vw(if no wide button) or remove this rule.

Trying to add animation/transition on dark mode toggle#

  • @2021-09-22

  • Overriding with index.css doesn't work: My components has Computed Attr. like below, yet there's no transition.

    transition-delay 0s, 0s transition-duration 5s, 5s transition-property background-color, color transition-timing-function ease-in, ease-in

  • Changing .css with yarn start re-render will not "recreate the entire component tree"(quote origin=MUI#6685) while changing theme will, also input-boxes will be cleared.

  • Current best work-around:

    • In short: Don't use MUI theme.
    • joshwcomeau
    • MUI#12827
    • My solution: wait for MUI upgrade, having a lot faith in the team.

Change input box autofill style (:-webkit-autofill)#

How does ButtonGroup works, with IconButton and Button?#

  • @2021-10-06

  • The React.cloneElement() function will pass props to children. The modularized IconButton needs to receive it properly. Three effects of this:

    1. Modularizing IconButton changes color and hover background shape of element.
    2. Passing empty props changes the Button color and border shape in ButtonGroup.
    3. IconButton (both MUI original and customized) in ButtonGroup will cause two
    Error/Warning Warning: React does not recognize the `disableElevation` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fullwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element. Warning: React does not recognize the `disableElevation` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableelevation` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Asked and answered on SO

  • The styling for the border is using :not(:last-of-type)(guess: on <button>).

    • IconButton have root node of <button>.
    • In Button, if href is defined, an <a> element will be used as the root node (otherwise a <button>), said in official doc.

    • This explains these two questions:

      1. Property href changes the right border of element, because it changes the <button> to a <a>Asked and answered on SO
      2. When all IconButton-s are on one side, other <Button>-s have href property, the hover background shape of last IconButton will change, because this would change the result of :not(:last-of-type) CSS query on <button>-s. * [Deprecated]mwe page hosted with GH Pages.

Import svg from DiceBear Jdenticon API#

<IconButton> does not extend <Button>#

  • @2021-10-12
  • Easy to check on <IconButton > API, that it inherits <ButtonBase>.
  • Thought it wrong all the time including in comments of MUI-PR#28645

Custom attributes with Typescript#

  • @2021-10-21
  • Use a -(dash) in the component, from SO
  • The prefix doesn't have to be data- (for div it works)

Custom hook with class component#

  • @2021-10-21
  • It is easy to apply but seems not in official doc, from SO
  • This page for typescript shows how to do the enhancers HOC clearly.
  • [ ] Tried to extend a class with the HOC and I don't know how to do it.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// React Hook "useNotYet" cannot be called in a class component.
export class NotYetComponent<P = {}, S = {}, SS = any>
  extends Component<P,S,SS> {
  notYet; constructor(props: P) {
  super(props);
  this.notYet = useNotYet();
  }
}
// TS Error
class NotYetComponent<P = {}, S = {}, SS = any> extends Component<P & { notYet: () => void }, S, SS> {}
class SearchField extends React.Component<{} & { notYet: () => void }, {}> {}
class NotYetComponent<P, S, SS> extends Component<P, S, SS> {}
const ExportedNotYetComponent = withNotYet(NotYetComponent);
export { ExportedNotYetComponent as NotYetComponent };

Set attribute of a MUI component#

  • @2021-10-21
  • Wrap it as a new component, like this (props goes last to overwrite, sx needs merge.)
1
2
3
function OLButton(props: ButtonProps) {
  return <Button variant="outlined" size="large" {...props} />;
}