Skip to content

Conversation

@wongyiuhang
Copy link

This PR is trying to pass Material-UI theme context to react-select, in order to support dark theme.

Closes #14

@seveibar
Copy link
Contributor

thanks @wongyiuhang! reviewing now...

neutral80: MUItheme.palette.grey['800'],
neutral90: MUItheme.palette.grey['900']
}
})}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be part of a global context or in a single file, in react when you define objects in component props it causes a lot of rerenders- it COULD be a problem from a performance perspective and it's a problem from a DRY perspective.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand your concern, however, the theme really would change on some rare occasions, for example, switching between light mode and dark mode.

Is that okay, if I somehow "memorise" the colors object, therefore reduces the re-rendering of the object?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const themeColors = useMemo(() => ({
  primary: MUItheme.palette.primary.main,
  primary75: MUItheme.palette.primary.light,
  primary50: MUItheme.palette.primary.light,
  primary25: MUItheme.palette.primary.light,
  neutral0: MUItheme.palette.background.paper,
  neutral5: MUItheme.palette.grey['50'],
  neutral10: MUItheme.palette.grey['100'],
  neutral20: MUItheme.palette.grey['200'],
  neutral30: MUItheme.palette.grey['300'],
  neutral40: MUItheme.palette.grey['400'],
  neutral50: MUItheme.palette.grey['500'],
  neutral60: MUItheme.palette.grey['600'],
  neutral70: MUItheme.palette.grey['700'],
  neutral80: MUItheme.palette.grey['800'],
  neutral90: MUItheme.palette.grey['900']
}), [MUItheme])
<AsyncSelect
  ...
  theme={theme => ({
    ...theme,
    colors: {
      ...theme.colors,
      ...themeColors
    }
  })}
  ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dropdown Select does not conform MUI Theme, especially in dark mode

2 participants