css 如何在Material UI TextField中设置装饰样式？

mcvgt66p 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(250)

我尝试添加startAdornment设置的默认14px左填充，并希望使其装饰占用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} />

这是我当前代码的结果：

这就是我想要的：

你可以忽略边框的颜色差异，这并不重要，我可以改变这一点。

css

来源：https://stackoverflow.com/questions/56811449/how-to-style-adornment-in-material-ui-textfield

2条答案

按热度按时间

ifmq2ha21#

在FilledInput和OutlinedInput www.example.com中有adornedStart和adornedEnd类classes.so，你可以使用它们，也可以使用TextFieldInputProps，这取决于你使用的变体。

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

CodeSandbox

赞(0）回复(0）举报 2023-06-07

bihw5rsg2#

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

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>
    ),
  }}
/>

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何在Material UI TextField中设置装饰样式？

2条答案

相关问题

热门标签

最新问答