Is there any documentation on styling components?

[willredington]

Pretty self-explanatory, but haven't found anything on the documentation online for how to style components.

[kmefeu]

@willredington I found this comment that helped me #33 (comment)

import { Provider, defaultTheme } from '@react-native-material/core'
import React, { ReactNode } from 'react'

interface iThemeProvider {
  children: ReactNode
}

const ThemeProvider: React.FC<iThemeProvider> = ({
  children,
}: iThemeProvider) => {
  return (
    <Provider
      theme={{
        // extend the default theme
        ...defaultTheme,
        palette: {
          primary: { main: '#6750A4', on: '#fff' },
          background: { main: '#001aff', on: '#49454F' },
          secondary: { main: '#fff', on: '#ff0ad6' },
          surface: { main: '#fff', on: '#6750A4' },
          error: { main: '#ff0000', on: '#fff' },
        },
        typography: {
          ...defaultTheme.typography,
          h1: {
            color: '#6750A4',
            fontFamily: 'Roboto_700Bold',
            fontSize: 56,
          },
        },
      }}>
      {children}
    </Provider>
  )
}

export default ThemeProvider

But you will receive this warning anyways

Type '{ children: ReactNode; theme: { palette: { primary: { main: string; on: string; }; background: { main: string; on: string; }; secondary: { main: string; on: string; }; surface: { main: string; on: string; }; error: { ...; }; }; typography: { ...; }; colorScheme: ColorScheme; elevations: Elevations; shapes: Shapes; }...' is not assignable to type 'IntrinsicAttributes & ThemeProviderProps & WindowSizeClassProviderProps & SpacingFuncProviderProps & IconComponentProviderProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & ThemeProviderProps & WindowSizeClassProviderProps & SpacingFuncProviderProps & IconComponentProviderProps'

I'm just adding some random colors and figuring out how to style it properly