reactjs - 如何在具有 Select 属性的材料 ui 文本字段中的“.MuiSelect-select”中增加最小宽度以及如何使用 Input 装饰访问 Selectfield

Question

当我在 chrome 开发工具中观察时，.MuiSelect-select 中的最小宽度为“16px”。我在这里使用带有 Select 属性的 Material-UI 文本字段。我需要将其覆盖为“25px”。此外，当我单击输入装饰选择字段时，它也不起作用。我不明白该怎么做。我提供了带有以下代码的代码框链接。任何帮助都会非常显着。提前致谢。

沙盒链接：https ://codesandbox.io/s/material-demo-forked-hjrb6?file=/demo.tsx

截屏：

代码：

import React from "react";
import { createStyles, makeStyles, Theme, fade } from "@material- 
ui/core/styles";
import {TextField, Typography} from "@material-ui/core";
import { TextValidator } from 'react-material-ui-form-validator';
import InputAdornment from '@material-ui/core/InputAdornment';
import MenuItem from '@material-ui/core/MenuItem';

 const currencies = [
 {
value: 'USD',
label: '$',
 },
 {
  value: 'EUR',
 label: '€',
  },
 {
  value: 'BTC',
 label: '฿',
 },
 {
value: 'JPY',
label: '¥',
},
];

 const useStyles = makeStyles((theme: Theme) =>
 createStyles({
 root: {
  "& > *": {
    margin: theme.spacing(1),
    width: "25ch"
  }
  }
 })
 );

  const useStylesReddit = makeStyles((theme: Theme) =>
 createStyles({


  selectClass: {
  minWidth: '20px'
  }

 })
);

 export const MovingOutRedditTextField = (TextFieldProps) => {
 const classes = useStylesReddit();
  // const iconStyles = makeIconStyles();
  const { id } = TextFieldProps;
   return (
   <TextField
  id={id}
  InputLabelProps={{
    shrink: true,
    
  }}
  
  InputProps={{
    classes,
    disableUnderline: true,
    endAdornment: (
      <InputAdornment position="end">
        <Typography
          color="textSecondary"
        >
          currency
        </Typography>
      </InputAdornment>
    )
   }}
  {...TextFieldProps}
   />
  );
 };

 export default function BasicTextFields() {
 const classes = useStyles();
 const [currency, setCurrency] = React.useState('EUR');

 const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setCurrency(event.target.value);
 };

  return (


   <MovingOutRedditTextField
  select
  classes={{select:classes.selectClass}}
  required
  style={{width:'400px'}}
  label="Return"
  id="securityDepoistReturn"
  value={currency}
  
  variant="filled"
>
  {currencies.map((option) => (
        <MenuItem key={option.value} value={option.value}>
          {option.label}
        </MenuItem>
      ))}
  </MovingOutRedditTextField>
  );
}

标签： reactjsmaterial-ui

Answer 1

使用select 的 prop定位select类。classes

<Select
  classes={{select:classes.selectClass}}
>
  <MenuItem value="">
    <em>None</em>
  </MenuItem>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

const useStyles = makeStyles((theme: Theme) =>
  createStyles({    selectClass:{
      minWidth:'25px'
    }
  }),
);

更新

根据最近的评论，TextBox使用并select传递 prop 以使其成为选择框。因此，在这种情况下，要操作select ，请在.proper 中min-width传递 classes 对象。应用于元素的道具 。SelectPropsTextBoxSelectPropsSelect

<TextField
  SelectProps={{
      classes:{
        select:classes.selectClass
      },
   }}
{...other props}
/>