[React UI Framework] Customize Styling for Mantine/Material UI

[reboottime]

Common Needs

• customize theme and color
• better structure
  • components/styled, to host wrapped components using styled solution (such as styled-components, @emtion/styled)

[reboottime]

Mantine UI

1. For most cases, you can customize your component styling 1). via a list of properties provided by style-props 2). or the styles api on the component level

2. Or update the mantine built-in components at the global level via “MantineProvider”, for example

import { MantineProvider, Text } from '@mantine/core';

function App() {

  return (
    <MantineProvider
      theme={{
        components: {
          Text: {
            styles: {
              root: { fontSize: '2rem' },
            },
          },
        },
      }}
      withGlobalStyles
      withNormalizeCSS
    >
      <Text>2rem text</Text>
    </MantineProvider>
  );
}

3. styled component solution
   • to access the theme from props
   • to access the prop types from
   • naming convention on using css in js styled solution
     • Prefixed with Styled
     • For Polymorphic components case, prefixed with _Styled, for example
       4. The naming convention on Mantine components
     • maintine-ComponentName-root: represents the root element of that component
     • others: under that component
       5. Maintine also supports customize global colors

[reboottime]

5. customize your color with Mantine

Example code

import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        colorScheme: 'dark',
        colors: {
          // override dark colors to change them for all components
          dark: [
            '#d5d7e0',
            '#acaebf',
            '#8c8fa3',
            '#666980',
            '#4d4f66',
            '#34354a',
            '#2b2c3d',
            '#1d1e30',
            '#0c0d21',
            '#01010a',
          ],
        },
      }}
    >
      <App />
    </MantineProvider>
  );
}

[reboottime]

Common Problems you may meet with using Mantine

1. How to extract css files from main bundle js file when using with CRA.
2. Tree shaking for production

[reboottime]

Research List

1. How @mantine handles the type extension of Polymorphic components, for example, if I pass. Link to the component property of NavLink, how can the NavLink know I also should set the to property
2. Kendo UI document: https://www.telerik.com/kendo-react-ui/components/styling/icons/

[reboottime]

Reference

1. Open Color: https://yeun.github.io/open-color/