如何为MaterialUI Select设置100%宽度并实现Flex表单布局

我使用Typescript、NextJS和MaterialUI开发一个表单，表单包含3个MaterialUI Select组件、一个输入框和一个按钮，期望实现指定布局。尝试通过Flexbox调整行内元素宽度，将每个行元素包裹在设置了flex-grow的Box中，并为父元素（行）添加间距，但无法将Select组件的宽度设置为100%。尝试过在BasicSelect的sx属性中设置宽度、修改Select的根类CSS、使用sx属性或内联样式等方法，均未解决问题。

相关代码 #

表单组件代码 #

import styles from './TransportCalculator.module.css'
import Box from '@mui/material/Box';
import BasicSelect from './TransportSelect';
import { Button } from '@mui/material';

const TransportCalculator = () => {
    return ( 
    <Box className={styles.calculator__container}>
      <p className={styles.title}>
        📱 Calculator transport
      </p>
      <Box className={styles.calculator__row}>
        <Box className={styles.calculator__item}>
          <BasicSelect />
        </Box>
        <Box className={styles.calculator__item}>
          <BasicSelect />
        </Box>
        <Box className={styles.calculator__item}>
          <BasicSelect />
        </Box>
        <Box className={styles.calculator__item}>
          <Button>Află prețul transportului</Button>
        </Box>
      </Box>
    </Box>
  );
}
export default TransportCalculator;

Select组件代码 #

"use client"
import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';

export default function BasicSelect() {
  const items = [
    '1',
    '2',
    '3',
    '4',
    '5'
  ];
  const [age, setAge] = React.useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <Box sx={{minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
          fullWidth={true}
        >
        {items.map(item => <MenuItem key={item}>{item}</MenuItem>)}
        </Select>
      </FormControl>
    </Box>
  );
}

表单组件CSS代码 #

.calculator__container {
  display: flex;
  flex-direction: column;
  gap: 45px;
  height: 160px;
  padding: 15px 30px 30px;
  width: 100%;
  border-radius: 15px;
  background: var(--neutrals, #FFF);
  box-shadow: 0px 1.763594388961792px 2.998110294342041px 0px rgba(0, 0, 0, 0.00), 0px 7.759815692901611px 6.207851886749268px 0px rgba(0, 0, 0, 0.01), 0px 19.04681968688965px 12.38043212890625px 0px rgba(0, 0, 0, 0.01), 0px 36.68276596069336px 24.267059326171875px 0px rgba(0, 0, 0, 0.01), 0px 61.725799560546875px 44.61893844604492px 0px rgba(0, 0, 0, 0.02), 0px 95.23409271240234px 76.1872787475586px 0px rgba(0, 0, 0, 0.02);
}
.calculator__row{
  display: flex;
}

.calculator__item {
  display: flex;
  flex-grow: 1;
}

.title {
  color: var(--secondary, #262626);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

问题根源是BasicSelect外层的Box设置了minWidth: 120，这个固定最小宽度限制了Select无法占满父容器的100%宽度。只需修改BasicSelect组件中的外层Box样式，将minWidth替换为width: '100%'，或者直接移除该sx属性即可。

修改后的Select组件代码 #

"use client"
import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';

export default function BasicSelect() {
  const items = [
    '1',
    '2',
    '3',
    '4',
    '5'
  ];
  const [age, setAge] = React.useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <Box sx={{width: '100%'}}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
          fullWidth={true}
        >
        {items.map(item => <MenuItem key={item}>{item}</MenuItem>)}
        </Select>
      </FormControl>
    </Box>
  );
}

额外布局优化 #

可以给calculator__row添加gap属性，让各个元素之间保持合适间距：

.calculator__row{
  display: flex;
  gap: 16px; /* 根据需求调整间距大小 */
}

修改后，Select组件会自动占满父容器宽度，配合Flexbox的flex-grow特性，三个Select和按钮会合理分配行内空间（按钮根据自身内容调整宽度，Select填充剩余空间）。

内容的提问来源于stack exchange，提问作者Shtefan Gusan