Tengo instalado eslint-plugin-sonarjs y me grita que uso la misma cadena, el color de la paleta, una y otra vez. Me sugiere escribirlo en una variable y usar la variable en su lugar.

Cuál sería la mejor práctica:

1. Ignore la advertencia de eslint/desactívela y use nombres de cadena como de costumbre

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

2. Escriba todos los colores del tema en variables y use variables en su lugar

 // colors.ts export const WHITE_COLOR = 'primary.white' // rest of the colors ... // MyComponent.tsx ... <Typography color={WHITE_COLOR} /> ...

3. Usar color del objeto del tema

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

4. Crear gancho usePalette que devolvería el objeto de paleta del tema

 // usePalette.ts const theme = useTheme(); return useMemo(() => theme.palette, [theme]); // MyComponent.tsx const palette = usePalette(); ... <Typography color={palette.primary.white} /> ...

5. O cree una nueva variante de Typography que use el color

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

?

En mi opinión, las opciones 2) y 3) son ridículas. 2) crea un envoltorio innecesario y 3) simplemente no se siente bien, demasiado para escribir.
1) es el más dulce.

¿Cuál crees que es la mejor práctica?