如何在 MUI TextField 中设置样式？答案

【问题标题】：How to style adornment in MUI TextField?如何在 MUI TextField 中设置样式？
【发布时间】：2019-11-10 16:19:58
【问题描述】：

我正在尝试仅添加由startAdornment 设置的默认 14px padding-left 并希望使其占据TextField 的一半。一般来说，我似乎无法弄清楚如何设置startAdornment 的样式。

我尝试设置 div 本身的样式，这可行，但仍有一个底层 14px 填充。我尝试设置 InputAdornment 本身的样式，但似乎没有效果。

InputProps={
    this.state.didChange[rowIndex] ? {
        startAdornment: (
            <InputAdornment
                position="start"
                component="div"
                style={{paddingLeft: '-14px'}}
                disablePointerEvents>
                <div style={{ backgroundColor: '#D3D4D0', marginLeft: '-14px', padding: "10px 13px", width: "26px", color: '#a1a39b' }}>
                    {prevVals[rowIndex]}
                </div>
            </InputAdornment>
        )
    } : null} />

这是我当前代码的结果：

这就是我想要的：

边框色差可以忽略，没关系我可以改。

【问题讨论】：

如果您能提供一个CodeSandbox 来展示当前状态将会很有帮助。这将为其他人提供一个更快的起点来试验和验证潜在的解决方案。
我想通了。所以 position="start" 继续添加另一个边距 8px。 O.o

标签： javascript css reactjs material-ui

【解决方案1】：

FilledInput 和 OutlinedInput 类中有 adornedStart 和 adornedEnd 类。所以您可以使用它们或使用 TextField InputProps 取决于您使用的变体。

 <TextField
           name={'text'}
           variant="outlined"
           InputProps={{
               endAdornment:
               <IconButton onClick={()=>0}>x</IconButton>,
               classes: {
                          adornedEnd: classes.adornedEnd
                         }
               }}
           />

这里是CodeSandbox

【讨论】：

“类”从何而来？
@Xeoncross 使用 makeStyles() material-ui.com/styles/basics/#hook-api 或 withStyles material-ui.com/styles/basics/#higher-order-component-api
codesandbox.io/s/material-demo-forked-ppv2w?file=/demo.js

【解决方案2】：

您可以通过删除OutlinedInput 左侧的填充来更改InputAdornment 的背景颜色，并在您的装饰中设置匹配的填充（基于输入here 的填充）；

import MuiTextField from '@mui/material/TextField';
import { styled } from '@mui/material/styles';

const TextField = styled(MuiTextField)(({ theme }) => ({
  '& .MuiOutlinedInput-root': {
    paddingLeft: 0,
  },
  '& .MuiInputAdornment-root': {
    backgroundColor: theme.palette.divider,
    padding: '28px 14px',
    borderTopLeftRadius: theme.shape.borderRadius + 'px',
    borderBottomLeftRadius: theme.shape.borderRadius + 'px',
  },
}));

<TextField
  placeholder="Password"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <Visibility />
      </InputAdornment>
    ),
  }}
/>

【讨论】：