MUIのアスタリスクの色だけを変えたりする(MUI v5)

MUIでTextFieldにrequiredを付与したときにアスタリスクが表示されます。このアスタリスクを強調するために色を変えたいと思います。

僕はMUIのテーマ設定コンポーネントを作ってProviderとして使っていますのでこんな感じに追記してあげます。
createTheme()を使えば既存のMUIコンポーネントをオーバーライドできます。

ChangeTheme.ts

import React, { FC, ReactNode } from 'react'
import { GridProps } from '@mui/material'
import { createTheme, ThemeProvider } from '@mui/material/styles'

interface Props {
    children?: ReactNode
}

const ChangeTheme: FC<Props & GridProps> = ({ children }) => {
    const theme = createTheme({
        components: {
            // 追記
            MuiFormLabel: {
                styleOverrides: {
                    asterisk: { color: '#FF6A61' },
                },
            },
        },
    })

    return <ThemeProvider theme={theme}>{children}</ThemeProvider>
}

export default ChangeTheme

結果

こんな感じでまとめて適用できました〜〜〜

参考