<p><code>TextField</code>（select）に<code>MenuProps: { autoFocus: false }</code>をつける。</p>
<pre><code>&#x3C;TextField
  sel...

`TextField`（select）に`MenuProps: { autoFocus: false }`をつける。

```tsx
<TextField
  select
  SelectProps={{
    displayEmpty: true,
    MenuProps: {
      autoFocus: false,
    },
  }}
>
```

MUI v5 Select で Value が空の時にbackgroundColorが変わる

## 前提

- `@emotion/react`と`mui`を使用しています。

## Child Component

```tsx
import { SerializedStyles } from '@emotion/react'

interface Props {
  className?: string
  css?: SerializedStyles
}

export function Child({ className }: Props) {
  return (
    <div className={className}>
    </div>
  )
}
```

## Parent Component

下記のケースでは、`some-class`と`emotion`で作成されたクラス名が、`Child`の`<div className={className}>`で適用される。

```tsx
<Child
  className="some-class"
  css={css`
    color: red;
  `}
/>
```

React で css propを子コンポーネントに渡す

## 前提

MUI v5 の`createTheme()`の実行時に渡す`options`をパッケージで配布することが目的

## Paletteに独自のプロパティを定義する

`custom`と`gradient`というプロパティを定義する。

```palette.ts
import { PaletteOptions } from '@mui/material/styles'

type CustomPaletteOptions = {
  custom: Record<string, `#${string}`>
  gradient: Record<string, string>
}

export const palette: PaletteOptions & CustomPaletteOptions = {
  custom: {
    green: '#12B886',
  },
  gradient: {
    primary: 'linear-gradient(180deg, #1EB990 0%, #15A881 100%)',
  },
}
```

```components.ts
import { ThemeOptions } from '@mui/material/styles'

export const components: ThemeOptions['components'] = {
}
```

```theme.ts
import { ThemeOptions } from '@mui/material/styles'
import { components } from './components'
import { palette } from './palette'

export const theme: ThemeOptions = {
  components,
  palette,
}
```

## PaletteOptionsの一部をRequiredにする

`options: ThemeOptions`を吐き出す前に、`palette.ts`(`PaletteOptions(ThemeOptions['palette'])`)を使用して、`components.ts`(`ThemeOptions['components']`)を定義するという利用ケースがあったが、型エラーが発生していた。

```components.ts
export const components: ThemeOptions['components'] = {
  MuiTooltip: {
    styleOverrides: {
      tooltip: {
        color: palette.primary?.main, // 👈 型エラー
      },
    },
  },
}
```

```error
プロパティ 'main' は型 'PaletteColorOptions' に存在しません。
プロパティ 'main' は型 'Partial<Color>' に存在しません。
```

`PaletteColorOptions`はユニオン型なので、型解決できていない。型を絞り込むか、`palette.ts`型を変更することで対応できる。

[ユニオン型 (union type) | TypeScript入門『サバイバルTypeScript』](https://typescriptbook.jp/reference/values-types-variables/union)

```ts
import { CommonColors, TypeAction } from '@material-ui/core/styles/createPalette'
import { Color } from '@mui/material'
import { alpha, PaletteOptions, SimplePaletteColorOptions } from '@mui/material/styles'

type CustomPaletteOptions = {
  custom: Record<string, `#${string}`>
  gradient: Record<string, string>
}

type RequiredPaletteOptions = {
  common: CommonColors
  primary: Required<SimplePaletteColorOptions> // PaletteColorでも良いと思う
  secondary: Required<SimplePaletteColorOptions>
  error: Required<SimplePaletteColorOptions>
  warning: Required<SimplePaletteColorOptions>
  info: Required<SimplePaletteColorOptions>
  success: Required<SimplePaletteColorOptions>
  grey: Color
  action: TypeAction
}

export const palette: PaletteOptions & CustomPaletteOptions & RequiredPaletteOptions = {
  ...
}
```

修正後

```components.ts
color: palette.primary.main
```

MUI v5 Select で Value が空の時にbackgroundColorが変わる

Related

Tags

Share