如何更改 MUI Material v6 中 MUI 日期选择器输入框的高度

huangapple go评论65阅读模式
英文:

How to change the height of MUI Datepicker input box in MUI Material v6

问题

The height property passed via sx through textField and slotProps is only affecting the Paper component.这个通过sx通过textFieldslotProps传递的height属性只影响了Paper组件。

英文:
<Paper elevation={0}>
  <DatePicker
    fullWidth
    views={['year', 'month', 'day']}
    openTo='month'
    value={initialDate}
    slotProps={{ textField: { sx: { height: '10px' } } }}
    onChange={(newValue) => handleInitialDateChange(newValue)}
  />
</Paper>

I have the above code. For some reason the height property I passed via sx via textField via slotProps is only affecting the Paper component.

Any help is appreciated.

答案1

得分: 1

以下是您要翻译的内容:

我在查找文档时发现的一个丑陋的解决办法是这样的:

sx={{
  '& .MuiInputBase-root': {
    height: '43px',
  },
}}

组件看起来像这样:

<Paper elevation={0}>
  <DatePicker
    fullWidth
    views={['year', 'month', 'day']}
    openTo='month'
    value={finalDate}
    sx={{
      '& .MuiInputBase-root': {
        height: '43px',
      },
    }}
    onChange={(newValue) => handleFinalDateChange(newValue)}
  />
</Paper>

我真的很希望有更好的方法来解决这个问题。如果没有的话,我想现在是时候为 MUI 团队提出功能请求了。

英文:

An ugly hack that I found after a bit of documentation dumpster diving is this:

sx={{
  &#39;&amp; .MuiInputBase-root&#39;: {
    height: &#39;43px&#39;,
  },
}}

The component looks like this:

&lt;Paper elevation={0}&gt;
  &lt;DatePicker
    fullWidth
    views={[&#39;year&#39;, &#39;month&#39;, &#39;day&#39;]}
    openTo=&#39;month&#39;
    value={finalDate}
    sx={{
      &#39;&amp; .MuiInputBase-root&#39;: {
        height: &#39;43px&#39;,
      },
    }}
    onChange={(newValue) =&gt; handleFinalDateChange(newValue)}
  /&gt;
&lt;/Paper&gt;

I would really appreciate a better way to do this, though. If there isn't, well I guess its time I put in a feature request for the MUI team.

huangapple
  • 本文由 发表于 2023年4月20日 04:30:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76058588.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定