自定义@mui TextField type=数字箭头

Question

我正在使用 https://mui.com/material-ui/ 库并导入 TextField 组件。
我需要的是把它塑造成这样：

问题是我无法：

1. 始终显示向上/向下箭头（即使没有悬停）

2. 用我的自定义样式显示它们（在所有浏览器上）

我目前正在使用 @mui/material 样式函数创建自定义组件

CustomTextField

，但我无法更改任何内容，甚至无法访问：

"& .MuiInputBase-root"

基本上我想复制这种风格：https://mui.com/base-ui/react-number-input/

谢谢！

Answer 1

使用

<TextField
            InputProps={
                {
                    endAdornment: (
                        <InputAdornment position="end">
                            <Stack direction={"column"}>
                                <ArrowDropUp sx={{border:"1px solid #c0c0c0",borderTopLeftRadius:3,borderTopRightRadius:3,}}/>
                                <ArrowDropDown sx={{border:"1px solid #c0c0c0",borderBottomLeftRadius:3,borderBottomRightRadius:3,}}/>
                            </Stack>
                        </InputAdornment>
                    )
                }
            }
        />