如何在带有Select属性的资料ui Textfield中增加“.”中的最小宽度以及如何访问带有输入装饰的Selectfield

Question

当我在chrome dev tools中观察到时，在.中有一个‘16 is’的最小宽度。我在这里使用的是带有Select属性的Material。我要把它重写为“25 to”此外，当我点击输入装饰选择字段不工作。我不明白怎么做，我正在提供下面的代码框链接。任何帮助都是值得感激的。提前谢谢。

沙箱链接：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>
  );
}

Answer 1

使用select的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支柱，使其成为一个选择框。因此，在本例中，要操作select的min-width，可以将类对象传递到TextBox的SelectProps支柱中。SelectProps中的道具应用于Select元素。

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

​

​

Answer 2

   const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    select: {
      minWidth: "200px !important",
      width: 2
    }
  }),
);


<Select
      labelId="demo-controlled-open-select-label"
      id="demo-controlled-open-select"
      className={classes.select}
 >

!important允许您重写默认值，但尽量避免其过度使用。

在select组件中，只在className中调用它，min-width用于响应，您仍然需要给出它的宽度，但是如果你定义了最小宽度，那么它不会比定义的最小宽度小。