I've searched high and low, combed through documentation, scoured YouTube for tutorials, and Googled endlessly with no luck. It feels like this might be beyond the capabilities of MUI, but it's becoming quite frustrating.
All I want is a clean and correct way to define my color palette so that components can easily access the various colors (even just using a style with a color variable would suffice).
Here is how my color object looks:
const colors = {
cultured: '#FCFAF9',
darkGray: '#333333',
turquoise: '#48E5C2',
unbleachedSilk: '#F3D3BD',
mediumGray: '#5e5e5e'
}
My goal is to primarily use the primary/secondary palettes, but also have additional colors for special elements or decorative purposes without resorting to incorrectly labeled palette objects (for example, using 'error' as a color when it doesn't actually represent an error).
Is MUI really limited to only two main colors? How do you all manage to define and utilize 5 different colors without causing confusion?
Here is my idea in pseudo-code:
<Button onClick={() => doSomething} color={{colors.mediumGray}} or style={{backgroundColor: colors.mediumGray}}>
Button
</Button>