yamankatby / react-native-material

Modular and customizable Material Design UI components for React Native
https://rn-material.js.org
MIT License
223 stars 38 forks source link

Is there any documentation on styling components? #59

Open willredington opened 1 year ago

willredington commented 1 year ago

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

kmefeu commented 1 year ago

@willredington I found this comment that helped me https://github.com/yamankatby/react-native-material/issues/33#issuecomment-1094012726


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