ふかしぎのReactさんぷるず

sxの解説 - MUI v5 API - Reactさんぷるず

最終更新 2022/02/07
MUIでのsxの扱い方の説明です。
ここでは初心者向けの基本的な説明をしています。

基本

sxでCSSを設定できます。
ただし単純にCSSを設定するならstyleを使っても同じです。
<div>
  <Box sx={{color:'red'}}>Red Box</Box>
  <Box style={{color:'blue'}}>Blue Box</Box>
</div>
sxとstyleの違いはsxはMUIが色など表示に関する設定をしているテーマを使用できるところです。
下のサンプルはthemeのprimaryカラーのmainを設定しています。
sxでは色が変わりますがstyleのほうはピュアCSSにprimary.mainなどというものは存在しないのでエラーとして無視されデフォルトの黒色になっています。
<div>
  <Box sx={{color:'primary.main'}}>primary.main Box</Box>
  <Box style={{color:'primary.main'}}>primary.main Box</Box>
</div>

border

borderという特殊処理があります。
borderと数値だけで枠線が付きます。
border: 1にした場合は'1px solid black'と同じ意味になります。
<div>
  <Box sx={{border: 1}}>Box 1</Box>
  <Box sx={{border: '1px solid black'}}>Box '1px solid black'</Box>
</div>

borderColor

borderColorで色を設定できます。
テーマの色を指定できます。
<div className="mb1rem">
  <Box sx={{border: 1, borderColor: 'primary.main'}}>Box 'primary.main'</Box>
  <Box sx={{border: 1, borderColor: theme => theme.palette.primary.main}}>Box theme.palette.primary.main</Box>
</div>

borderRadius

borderRadiusで枠線に丸みをつけることができます。
themeのデフォルトの数値が4のため4を基準としてborderRadiusを計算するとただ数値を書いただけの時と一致します。
<div>
<div className="mb1rem">
  <Box sx={{border: 1, borderRadius: 1}}>Box 1</Box>
  <Box sx={{border: 1, borderRadius: theme => 0.25 * theme.shape.borderRadius}}>Box borderRadius0.25</Box>
</div>
<div className="mb1rem">
  <Box sx={{border: 1, borderRadius: 2}}>Box 2</Box>
  <Box sx={{border: 1, borderRadius: theme => 0.5 * theme.shape.borderRadius}}>Box borderRadius0.5</Box>
</div>
<div className="mb1rem">
  <Box sx={{border: 1, borderRadius: 4}}>Box 4</Box>
  <Box sx={{border: 1, borderRadius: theme => 1 * theme.shape.borderRadius}}>Box borderRadius1</Box>
</div>
</div>

印刷

印刷時に非表示にする特殊処理があります。
displayPrint: 'none'は '@media print': { display: 'none'と同じ意味になります。
ブラウザの印刷のプレビュー画面で「Box1 印刷しない」が表示されていないことが確認できます。
<div>
  <Box sx={{ displayPrint: 'none' }}>Box1 印刷しない</Box>
  <Box sx={{ '@media print': { display: 'none' } }}>Box2 印刷しない</Box>
</div>

グリッド

グリッドで特殊処理があります。
sxでgapを指定するとテーマのスペーシングをかけた値が適用されます。
デフォルトのtheme.spacingは8pxです。
sx={{ gap: 2 }}とした場合は実際には2×8で16pxが適用されます。
<Box style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr"}} sx={{ gap: 2 }}>
  <div style={{ backgroundColor:'pink'}}>あ</div>
  <div>い</div>
  <div style={{ backgroundColor:'pink'}}>う</div>
  <div>え</div>
  <div style={{ backgroundColor:'pink'}}>お</div>
  <div>か</div>
</Box>

colorとbackgroundColorでのテーマのパレットの色

colorとbackgroundColorでテーマのパレットを使用できますが、省略して書くことができます。
そしてbackgroundColorはbgcolorと省略した別名(エイリアス)で書くことができます。
エイリアスはbgColorではなくbgcolorと全て小文字になります。
<div>
  <Box sx={{ color: 'primary.main' }}>文字色 省略</Box>
  <Box sx={{ color: theme => theme.palette.primary.main }}>文字色 省略しない</Box>
  <Box sx={{ backgroundColor: 'primary.main' }}>背景色 省略</Box>
  <Box sx={{ backgroundColor: theme => theme.palette.primary.main }}>背景色 省略しない</Box>
  <Box sx={{ bgcolor: 'primary.main' }}>背景色(プロパティの省略した別名(エイリアス))</Box>
</div>

sxでzIndexを使う

テーマの中にz-indexの配列があります。
sxでzIndexを指定するときにその配列を利用できます。
themeのzIndex配列
"zIndex": {
  "mobileStepper": 1000,
  "speedDial": 1050,
  "appBar": 1100,
  "drawer": 1200,
  "modal": 1300,
  "snackbar": 1400,
  "tooltip": 1500
}
<div>
  <Box sx={{ zIndex: 'mobileStepper' }}>このz-indexは1000</Box>
  <Box sx={{ zIndex: 'speedDial' }}>このz-indexは1050</Box>
</div>

sxでboxShadowを使う

テーマの中にbox-shadowの配列があります。
sxでboxShadowを指定するときにその配列を利用できます。
themeのshadows配列
    "shadows": [
        "none",
        "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
        "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
        "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
        "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
        "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
        "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
        "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
        "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
        "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
        "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
        "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
        "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
        "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
        "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
        "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
        "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
        "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)"
    ],
<div style={{display: "grid", gridTemplateColumns:"repeat(4 ,1fr)",gap:"10px"}}>
  <Box sx={{ boxShadow:  1 }} style={{margin:"20px"}}>このboxShadowは 1</Box>
  <Box sx={{ boxShadow:  2 }} style={{margin:"20px"}}>このboxShadowは 2</Box>
  <Box sx={{ boxShadow:  3 }} style={{margin:"20px"}}>このboxShadowは 3</Box>
  <Box sx={{ boxShadow:  4 }} style={{margin:"20px"}}>このboxShadowは 4</Box>
  <Box sx={{ boxShadow:  5 }} style={{margin:"20px"}}>このboxShadowは 5</Box>
  <Box sx={{ boxShadow:  6 }} style={{margin:"20px"}}>このboxShadowは 6</Box>
  <Box sx={{ boxShadow:  7 }} style={{margin:"20px"}}>このboxShadowは 7</Box>
  <Box sx={{ boxShadow:  8 }} style={{margin:"20px"}}>このboxShadowは 8</Box>
  <Box sx={{ boxShadow:  9 }} style={{margin:"20px"}}>このboxShadowは 9</Box>
  <Box sx={{ boxShadow: 10 }} style={{margin:"20px"}}>このboxShadowは10</Box>
  <Box sx={{ boxShadow: 11 }} style={{margin:"20px"}}>このboxShadowは11</Box>
  <Box sx={{ boxShadow: 12 }} style={{margin:"20px"}}>このboxShadowは12</Box>
  <Box sx={{ boxShadow: 13 }} style={{margin:"20px"}}>このboxShadowは13</Box>
  <Box sx={{ boxShadow: 14 }} style={{margin:"20px"}}>このboxShadowは14</Box>
  <Box sx={{ boxShadow: 15 }} style={{margin:"20px"}}>このboxShadowは15</Box>
  <Box sx={{ boxShadow: 16 }} style={{margin:"20px"}}>このboxShadowは16</Box>
  <Box sx={{ boxShadow: 17 }} style={{margin:"20px"}}>このboxShadowは17</Box>
  <Box sx={{ boxShadow: 18 }} style={{margin:"20px"}}>このboxShadowは18</Box>
  <Box sx={{ boxShadow: 19 }} style={{margin:"20px"}}>このboxShadowは19</Box>
  <Box sx={{ boxShadow: 20 }} style={{margin:"20px"}}>このboxShadowは20</Box>
  <Box sx={{ boxShadow: 21 }} style={{margin:"20px"}}>このboxShadowは21</Box>
  <Box sx={{ boxShadow: 22 }} style={{margin:"20px"}}>このboxShadowは22</Box>
  <Box sx={{ boxShadow: 23 }} style={{margin:"20px"}}>このboxShadowは23</Box>
  <Box sx={{ boxShadow: 24 }} style={{margin:"20px"}}>このboxShadowは24</Box>
</div>

sxでのサイズ計算

width、height、minHeight、maxHeight、minWidth、maxWidthは特殊な計算処理があります。
数値が1以下の場合は%計算されます。
<div>
  <Box sx={{ width: 200 }} style={{border: "1px solid #000"}}>200 通常、これは200pxとして扱われる。</Box>
  <Box sx={{ width: 0.5 }} style={{border: "1px solid #000"}}>0.5 特殊、1以下なので100*0.5=50%として扱われる。</Box>
  <Box sx={{ width: 1/2 }} style={{border: "1px solid #000"}}>1/2 特殊、1以下の2分の1なので100*(1/2)=50%として扱われる。</Box>
  <Box sx={{ width: 1/3 }} style={{border: "1px solid #000"}}>1/3 特殊、1以下の3分の1なので100*(1/3)=33.33...%として扱われる。</Box>
</div>

sxでのmarginとpaddingの処理

margin、paddingに特殊処理があります。
sxで数値だけを指定するとテーマのスペーシングをかけた値が適用されます。
デフォルトのtheme.spacingは8pxです。
sx={{ margin: 2 }}とした場合は実際には2×8で16pxが適用されます。
<div>
  <Box sx={{ margin: "8px" }} style={{border: "1px solid #000"}}>これはmargin:8px</Box>
  <Box sx={{ margin: 1 }} style={{border: "1px solid #000"}}>1 これはmargin:8pxとして扱われる。</Box>
  <Box sx={{ margin: 3 }} style={{border: "1px solid #000"}}>3 これはmargin:24pxとして扱われる。</Box>
  <Box sx={{ margin: 5 }} style={{border: "1px solid #000"}}>5 これはmargin:40pxとして扱われる。</Box>
</div>

marginとpaddingの省略形の別名(エイリアス)

margin、paddingの省略形の別名エイリアスがあります。
<div>
  <Box sx={{ m:  2 }} style={{border: "1px solid #000"}}>mはmarginの別名</Box>
  <Box sx={{ mt: 2 }} style={{border: "1px solid #000"}}>mtはmargin-topの別名</Box>
  <Box sx={{ mr: 2 }} style={{border: "1px solid #000"}}>mrはmargin-rightの別名</Box>
  <Box sx={{ mb: 2 }} style={{border: "1px solid #000"}}>mbはmargin-bottomの別名</Box>
  <Box sx={{ ml: 2 }} style={{border: "1px solid #000"}}>mlはmargin-leftの別名</Box>
  <Box sx={{ mx: 2 }} style={{border: "1px solid #000"}}>mxはmargin-left, margin-rightの別名</Box>
  <Box sx={{ my: 2 }} style={{border: "1px solid #000"}}>myはmargin-top, margin-bottomの別名</Box>
  <Box sx={{ p:  2 }} style={{border: "1px solid #000"}}>pはpaddingの別名</Box>
  <Box sx={{ pt: 2 }} style={{border: "1px solid #000"}}>ptはpadding-topの別名</Box>
  <Box sx={{ pr: 2 }} style={{border: "1px solid #000"}}>prはpadding-rightの別名</Box>
  <Box sx={{ pb: 2 }} style={{border: "1px solid #000"}}>pbはpadding-bottomの別名</Box>
  <Box sx={{ pl: 2 }} style={{border: "1px solid #000"}}>plはpadding-leftの別名</Box>
  <Box sx={{ px: 2 }} style={{border: "1px solid #000"}}>pxはpadding-left, padding-rightの別名</Box>
  <Box sx={{ py: 2 }} style={{border: "1px solid #000"}}>pyはpadding-top, padding-bottomの別名</Box>
</div>

Typography

fontFamily、fontSize、fontStyle、fontWeightはテーマの値を設定できます。
themeのtypography配列
"typography": {
  "htmlFontSize": 16,
  "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
  "fontSize": 14,
  "fontWeightLight": 300,
  "fontWeightRegular": 400,
  "fontWeightMedium": 500,
  "fontWeightBold": 700,
  "h1": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 300,
    "fontSize": "6rem",
    "lineHeight": 1.167,
    "letterSpacing": "-0.01562em"
  },
  "h2": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 300,
    "fontSize": "3.75rem",
    "lineHeight": 1.2,
    "letterSpacing": "-0.00833em"
  },
  "h3": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 400,
    "fontSize": "3rem",
    "lineHeight": 1.167,
    "letterSpacing": "0em"
  },
  "h4": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 400,
    "fontSize": "2.125rem",
    "lineHeight": 1.235,
    "letterSpacing": "0.00735em"
  },
  "h5": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 400,
    "fontSize": "1.5rem",
    "lineHeight": 1.334,
    "letterSpacing": "0em"
  },
  "h6": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 500,
    "fontSize": "1.25rem",
    "lineHeight": 1.6,
    "letterSpacing": "0.0075em"
  },
  "subtitle1": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 400,
    "fontSize": "1rem",
    "lineHeight": 1.75,
    "letterSpacing": "0.00938em"
  },
  "subtitle2": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 500,
    "fontSize": "0.875rem",
    "lineHeight": 1.57,
    "letterSpacing": "0.00714em"
  },
  "body1": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 400,
    "fontSize": "1rem",
    "lineHeight": 1.5,
    "letterSpacing": "0.00938em"
  },
  "body2": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 400,
    "fontSize": "0.875rem",
    "lineHeight": 1.43,
    "letterSpacing": "0.01071em"
  },
  "button": {
  "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 500,
    "fontSize": "0.875rem",
    "lineHeight": 1.75,
    "letterSpacing": "0.02857em",
    "textTransform": "uppercase"
  },
  "caption": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 400,
    "fontSize": "0.75rem",
    "lineHeight": 1.66,
    "letterSpacing": "0.03333em"
  },
  "overline": {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontWeight": 400,
    "fontSize": "0.75rem",
    "lineHeight": 2.66,
    "letterSpacing": "0.08333em",
    "textTransform": "uppercase"
  }
},

fontFamilyのサンプル

テーマのfontFamilyにはRoboto、Helvetica、Arial、sans-serifが設定されています。
<div>
  <Box sx={{ fontFamily: 'fontFamily' }}>fontFamily</Box>
</div>

fontSizeのサンプル

<div>
  <Box sx={{ fontSize: 'htmlFontSize' }}>htmlFontSize</Box>
  <Box sx={{ fontSize: 'fontSize' }}>fontSize</Box>
</div>

fontWeightのサンプル

<div>
  <Box sx={{ fontWeight: 'fontWeightLight' }}>fontWeight: fontWeightLight</Box>
  <Box sx={{ fontWeight: 'light' }}>light(接頭のfontWeightを省略できる)</Box>
  <Box sx={{ fontWeight: theme => theme.typography.fontWeightLight }}>theme.typography.fontWeightLight</Box>
  <Box sx={{ fontWeight: 'fontWeightRegular' }} style={{marginTop:"10px"}}>fontWeight: fontWeightRegular</Box>
  <Box sx={{ fontWeight: 'regular' }}>regular(接頭のfontWeightを省略できる)</Box>
  <Box sx={{ fontWeight: theme => theme.typography.fontWeightRegular }}>theme.typography.fontWeightRegular</Box>
  <Box sx={{ fontWeight: 'fontWeightMedium' }} style={{marginTop:"10px"}}>fontWeight: fontWeightMedium</Box>
  <Box sx={{ fontWeight: 'medium' }}>medium(接頭のfontWeightを省略できる)</Box>
  <Box sx={{ fontWeight: theme => theme.typography.fontWeightMedium }}>theme.typography.fontWeightMedium</Box>
  <Box sx={{ fontWeight: 'fontWeightBold' }} style={{marginTop:"10px"}}>fontWeight: fontWeightBold</Box>
  <Box sx={{ fontWeight: 'bold' }}>bold(接頭のfontWeightを省略できる)</Box>
  <Box sx={{ fontWeight: theme => theme.typography.fontWeightBold }}>theme.typography.fontWeightBold</Box>
</div>

typography

テーマで設定されてるtypographyを適用できます。
<div>
  <Box sx={{ typography: 'h1' }}>typography: 'h1'</Box>
  <Box sx={{ typography: 'h2' }}>typography: 'h2'</Box>
  <Box sx={{ typography: 'h3' }}>typography: 'h3'</Box>
  <Box sx={{ typography: 'h4' }}>typography: 'h4'</Box>
  <Box sx={{ typography: 'h5' }}>typography: 'h5'</Box>
  <Box sx={{ typography: 'h6' }}>typography: 'h6'</Box>
  <Box sx={{ typography: 'subtitle1' }}>typography: 'subtitle1'</Box>
  <Box sx={{ typography: 'subtitle2' }}>typography: 'subtitle2'</Box>
  <Box sx={{ typography: 'body1' }}>typography: 'body1'</Box>
  <Box sx={{ typography: 'body2' }}>typography: 'body2'</Box>
  <Box sx={{ typography: 'button' }}>typography: 'button'</Box>
  <Box sx={{ typography: 'caption' }}>typography: 'caption'</Box>
  <Box sx={{ typography: 'overline' }}>typography: 'overline'</Box>
</div>

コールバック関数

sxの値にはコールバック関数が使えます。
theme.spacing(5)はデフォルトのtheme.spacingが8pxなので5をかけた値の40pxになります
<Box sx={{ height: (theme) => theme.spacing(5) }} style={{border: "1px solid #000"}}>高さ40px</Box>

配列

sxは配列をつかって指定することができます。
その場合は一番最後に条件が一致するものが適用されます。
配列にはコールバック関数を使用できます。
下のサンプルは最初はnumが空欄なので背景が赤、2を選ぶと緑、1を選び直すと青に変わります。2のピンクは同じ条件で後の方に緑があるためそちらが適用されます。つまりピンクは使用されません。3はコールバック関数の使用例。4はテーマの色を指定しています。
const Main = () => {
  const [num,useNum] = useState();
  const changeColor = (event) => {
    useNum(event.target.value);
  }
  return (
<div>
<TextField select defaultValue="1" onChange={(event)=>changeColor(event)}
  sx={[
  { backgroundColor: 'red',  },
  (num=='1') && { backgroundColor: 'blue'  },
  (num=='2') && { backgroundColor: 'pink'  },
  (num=='2') && { backgroundColor: 'green' },
  (num=='3') && ((theme) => {return {backgroundColor: theme.palette.primary.main}}) ,
  (num=='4') && { backgroundColor: 'secondary.dark' },
]}
>
  <MenuItem value="1">1</MenuItem>
  <MenuItem value="2">2</MenuItem>
  <MenuItem value="3">3</MenuItem>
  <MenuItem value="4">4</MenuItem>
</TextField>
<div>numの値:「{num}」</div>
</div>
);
}
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

灰色とgrayとgreyの注意点

日本語の灰色は英語ではgrayです。
ですがgreyという単語も存在します。
これはアメリカ英語とイギリス英語の違いです。
アメリカ英語ではgrayになります。
イギリス英語ではgreyになります。
ほとんどのブラウザではこの違いを吸収しどちらでも動作するのになっています。
ですがなぜかMUIではCSSでgreyは灰色になりますがsxでgreyは灰色になりません。
greyはMUI内部で配列として持ち特殊な扱いをしているので配列自体と勘違いされるため出力されません。
そのため配列の中身の値を指定しなければいけません。例えばgrey.400やgrey.A100などです。
それが面倒な場合はアメリカ英語のgrayを使うのも手でしょう。
困ったことにmui.comなどでちょいちょいサンプルでsxにgreyが使われています。もちろん正しく機能しません。
<div>
  <div style={{backgroundColor:"gray"}}>styleで背景gray</div>
  <div style={{backgroundColor:"grey"}}>styleで背景grey</div>
  <Box sx={{backgroundColor: 'gray'}}>Boxのsxで背景gray</Box>
  <Box sx={{backgroundColor: 'grey'}}>Boxのsxで背景grey</Box>
  <Box sx={{backgroundColor: 'grey.400'}}>Boxのsxで背景grey.400</Box>
  <Box sx={{backgroundColor: 'grey.A100'}}>Boxのsxで背景grey.A100</Box>
</div>

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次