ReactでMUIコンポーネントにstyleを渡す

なんてよぶかわからんが、とりあえずメモ

mui.com

こいつにstyleを渡すには sx propsにわたす必要がある.

const a = {
    sx: {
        backgroundColor: '#eee',
    }
}

return (
    <TextField
    id="ほげほげ"
    label="ほげほげ"
    defaultValue={hogehoge}
    ...a
    />
)

このとき、backgroundColor を background-color って指定したら怒られる。

react_devtools_backend.js:4026 Using kebab-case for css properties in objects is not supported. Did you mean backgroundColor?

なるほど。

ちなみに、TypeScriptだと型を付ける必要があるが、こんな感じできました。

import { Theme } from '@mui/material/styles'
import { SxProps } from '@mui/system'

const sx: SxProps<Theme> = {
    mt: 2,
}
const a = {
    sx: {
        ...sx, ...{ backgroundColor: '#eee' },
    }
}

return (
    <TextField
        id="ほげほげ"
        label="ほげほげ"
        defaultValue={hogehoge}
    {...a}
    />
)