Open willredington opened 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
Pretty self-explanatory, but haven't found anything on the documentation online for how to style components.