material-ui 相关问题

我想将占位符（-- Select --）添加到由 TextField 使用 select 属性创建的以下 MUI Select 组件。 const [国家/地区，设置国家/地区] = useState("") 我想将占位符 (-- Select --) 添加到由 TextField 使用 select 属性创建的以下 MUI Select 组件。 const [country, setCountry] = useState("") <TextField select value={country} onChange={e => setCountry(e.target.value)} > <MenuItem value='US'>America</MenuItem> <MenuItem value='CA'>Canada</MenuItem> <MenuItem value='UK'>England</MenuItem> </TextField> 我尝试添加 placeholder='-- Select --' 道具，但无法显示占位符。然后我尝试添加 label='-- Select --' 道具。尽管可以显示占位符，但当最初渲染组件并尝试选择一个选项时，标签移动到组件的左上角，我不想要该动画。然后我尝试添加 InputLabelProps={{disableAnimation: true}} 道具，但动画仍然存在。有人可以教我如何在我的案例中添加占位符吗？如果我们检查 Select 元素，span 内部有一个空的 div，其类为 .MuiSelect-select，当没有选择值时可见。我们可以使用此span创建一个解决方案，如下所示： const [country, setCountry] = useState(''); return ( <TextField sx={{ width: '300px', '& .MuiSelect-select span::before': { content: "'-- Select --'", }, }} select value={country} onChange={(e) => setCountry(e.target.value)} > <MenuItem value="US">America</MenuItem> <MenuItem value="CA">Canada</MenuItem> <MenuItem value="UK">England</MenuItem> </TextField> ); 您可以查看 this StackBlitz，了解此解决方案的实时工作示例。

select material-ui textfield placeholder

回答 1 投票 0

如何设置 Material UI 表格标题的样式？

如何设置材质 UI 表格标题的样式？也许像使用 useStyle 添加类之类的东西。甜点（100克

javascript reactjs material-ui react-table

回答 6 投票 0

在 React 中禁用 Material-UI 按钮中的提升

我想在React中禁用material-ui中按钮的默认高度。下面的代码似乎不起作用：常量主题 = createTheme({ 成分： { 穆按钮：{ 默认属性：{ ...

reactjs material-ui

回答 2 投票 0

如果 MenuItem 的 value prop 和 option 不同，如何在 MUI Select 组件中添加占位符？

我想向以下 MUI Select 组件添加一个占位符（-- Select --）。 const [国家/地区，设置国家/地区] = useState("") 我想向以下 MUI Select 组件添加一个占位符 (-- Select --)。 const [country, setCountry] = useState("") <FormControl fullWidth error={!country}> <Select displayEmpty renderValue={selected => selected.length === 0 ? '-- Select --' : selected} value={country} onChange={e => setCountry(e.target.value)} > <MenuItem value='US'>America</MenuItem> <MenuItem value='CA'>Canada</MenuItem> <MenuItem value='UK'>England</MenuItem> </Select> {!country && <FormHelperText>This field is required.</FormHelperText>} </FormControl> 当我添加 displayEmpty 并在 renderValue 组件中添加以下 Select 属性时，如果我选择“美国”，则会呈现“美国”而不是“美国”。 renderValue={selected => selected.length === 0 ? '-- Select --' : selected} 如果 value 道具按如下方式更改，则该组件可以正常工作。 <MenuItem value='America'>America</MenuItem> <MenuItem value='Canada'>Canada</MenuItem> <MenuItem value='England'>England</MenuItem> 但是，数据库中只会存储国家/地区代码，因此值必须是“US”、“CA”和“UK”。有人可以教我如何添加占位符，同时选中相应选项后才能正确显示吗？最常见和推荐的方法是在对象中找到正确的标签。 const CountryFormComponent = () => { ...rest of component body const listOfCountries = [{id : 'US', label: 'America'}, {id : 'CA', label: 'Canada'}, {id : 'UK', label: 'England'}, ]; const generateRenderValue = (selected) => { return (selected.length === 0 ? '-- Select --' : listOfCountries.find((x) => x.id === selected).label); } .... //return statement .... <FormControl fullWidth error={!country}> <Select displayEmpty renderValue={generateRenderValue} value={country} onChange={e => setCountry(e.target.value)} > {listOfCountries.map((x) => <MenuItem value={x.id}>{x.label}</MenuItem>} </Select>

material-ui

回答 0 投票 0

带超链接的材质 UI 文本字段

将超链接连同文本内容作为值传递给material-ui的TextFeild，但它呈现为字符串（如下图所示）成分：从 '@material-ui/core' 导入 { TextField, Link } ...

reactjs material-ui

回答 2 投票 0

如何自定义MUI AutoComplete组件以支持子菜单选项？

我正在使用 MUI AutoComplete 来显示选项列表。但是，其中一些需要有子菜单类型的选项。我无法实施它。以下是我迄今为止能够实现的内容。但是...

material-ui mui-x

回答 1 投票 0

React MUI 卡无法具有相同的高度

我有一个带有 3 张卡的仪表板，其中调用了 3 个独立的组件。卡片的高度根据每张卡片的内容而扩展。我想让所有 3 张卡片的高度都与...