英文:
Mui Input - Full width broken with min & max attributes
问题
我创建了一个沙盒，因为我不敢相信这确实发生了，但事实就是这样的：
https://codesandbox.io/s/nifty-swanson-yxj4n2?file=/NumberField.js:1075-1097
问题很简单，如果在HTML输入上设置了min和max属性，宽度会减小。这也没有在任何CSS中表示。如果你设置了min或max中的任何一个，那么宽度会正确应用。
有max的情况：
没有max的情况：
是否可能在MUI中使其完全宽度并仍然具有min和max属性？
英文:
I've put together a sandbox because I could not believe it was really happening but here it is:
https://codesandbox.io/s/nifty-swanson-yxj4n2?file=/NumberField.js:1075-1097
The issue is simply, if you have min & max attributes set on the html input, the width is reduced. This is not represented in any css either. If you have either one of the min or max then the width is correctly applied.
With max
without max
Is it possible to get it full width with MUI and still have min & max attirbutes?
答案1
得分: 1
这显然发生在Chrome中，但在Firefox中没有。
这似乎不是由MUI引起的，但一个简单的HTML文件已经显示了这种行为：
<html><body>
<input type="number" min="0" max="1000" />
</body></html>
设置或不设置min都会产生类似的效果。
结论
在我看来，该字段似乎尝试足够大，以适应由min/max定义的最大可能数字。如果未定义min或max，则该字段以某种默认的“可能足够大”的大小呈现。
（这只是我的猜测，抱歉，我找不到相关文档。）
毕竟，如果没有指定样式，我认为输入元素的宽度没有客观“正确”的大小，所以我认为如果需要的话，浏览器可以合理地期望开发人员来指定它。
应用自定义样式
在MUI中，您可以设置TextField组件的fullWidth属性：
<MUITextField
fullWidth
...
/>
当然，您还可以具体设置一些样式，使用style={ ... }或classes={ ... }：
<MUITextField
classes={{
root: 'myTextFieldClass',
}}
style={{
width: '100%',
}}
...
/>
英文:
This apparently happens in Chrome, but not in Firefox.
It seems to be not caused by MUI, but a simple HTML file shows this behavior already:
<html><body>
<input type="number" min="0" max="1000" />
</body></html>
Also setting or not setting min has a similar effect.
Conclusion
It seems to me that the field tries to be large enough to fit the largest possible
number defined by min/max. If min or max is not defined, the field
is rendered with some default "probably large enough" size.
(I'm guessing here, I'm sorry, I couldn't find it documented.)
After all, I think there is no objectively "correct" width of an input element, if no styles
are specified, so I think it's fair enough for the browsers to expect the
developer to specify it, if desired.
Applying custom styles
In MUI you can set fullWidth property of the TextField component:
<MUITextField
fullWidth
...
/>
Of course, you can set some styles specifically, with style={ ... } or classes={ ... }:
<MUITextField
classes={{
root: 'myTextFieldClass',
}}
style={{
width: '100%',
}}
...
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论