I have eslint-plugin-sonarjs installed and it yells at me about me using the same string - color from palette - over and over again. It suggests me to write it to a variable and use the variable instead.

What would be the best practice:

1. Ignore eslint warning/disable it and use string names as usual

// MyComponent.tsx
...
<Typography color={'primary.white'}/>
...

2. Write all theme colors in variables and use variables instead

// colors.ts
export const WHITE_COLOR = 'primary.white'
// rest of the colors
...

// MyComponent.tsx
...
<Typography color={WHITE_COLOR} />
...

3. Use color from theme object

// MyComponent.tsx
const theme = useTheme()
...
<Typography color={theme.palette.primary.white} />
...

4. Create hook usePalette that would return palette object from theme

// usePalette.ts
const theme = useTheme();
return useMemo(() => theme.palette, [theme]);

// MyComponent.tsx
const palette = usePalette();
...
<Typography color={palette.primary.white} />
...

5. Or create a new Typography variant that uses the color

// MuiTypography.ts variants
...
{
  props: {variant: 'white-text'},
  styles: (theme) => ({
    color: theme.palette.primary.white
  })
}
...

// MyComponent.tsx
...
<Typography variant={'white-text'} />
...

?

In my opinion options 2) and 3) are ridiculous. 2) creates unnecessary wrapping and 3) just doesn't feel right, too much to write.
1) is the sweetiest.

What do you think is the best practice?