material-ui 相关问题

实施Google Material Design的React组件。 http://material-ui.com

我正在使用 React Material UI 来构建我的组件。我正在使用反应多选来从用户那里获取多个值。我正在使用 React Material UI 来构建我的组件。我正在使用反应多选来从用户那里获取多个值。 <FormControl className={clsx(classes.formControl, classes.noLabel)}> <Select multiple value={personName} onChange={handleChange} onClick={(e) => { e.stopPropagation(); e.preventDefault(); }} input={<Input />} renderValue={(selected) => { if (selected.length === 0) { return <em>Placeholder</em>; } return selected.join(", "); }} MenuProps={MenuProps} inputProps={{ "aria-label": "Without label" }} > <MenuItem disabled value=""> <em>Placeholder</em> </MenuItem> {names.map((name) => ( <MenuItem key={name} value={name} style={getStyles(name, personName, theme)} > {name} </MenuItem> ))} </Select> </FormControl> 工作正常。但当用户选择该值时，我需要关闭下拉列表。但现在只有当模糊事件触发时才会关闭。当用户选择任何值时是否有任何选项可以关闭下拉列表？提前致谢也许你可以通过使用 useRef 钩子来解决这个问题。添加对选择的引用，在更改处理程序中，您可以尝试使用 ref.current.close() 关闭它。 import React , {useRef} from 'react'; const ref = useRef() <FormControl className={clsx(classes.formControl, classes.noLabel)}> <Select multiple value={personName} onChange={handleChange} ref={ref} onClick={(e) => { e.stopPropagation(); e.preventDefault(); }} input={<Input />} renderValue={(selected) => { if (selected.length === 0) { return <em>Placeholder</em>; } return selected.join(", "); }} MenuProps={MenuProps} inputProps={{ "aria-label": "Without label" }} > <MenuItem disabled value=""> <em>Placeholder</em> </MenuItem> {names.map((name) => ( <MenuItem key={name} value={name} style={getStyles(name, personName, theme)} > {name} </MenuItem> ))} </Select> </FormControl> const handleChange = (event) =>{ .... ref.current.close(); }

reactjs react-native material-ui

回答 1 投票 0

MUI 上没有 tailwindcss 的样式

我无法从 tailwindcss 获取任何样式来显示我的 MUI 按钮。我正在使用 babel 和 webpack。 npm run dev 脚本是“webpack --modedevelopment--watch” 顺风.css 模块.导出...

javascript css reactjs material-ui tailwind-css

回答 2 投票 0

如何删除MUI号码字段中的向上和向下箭头？

我想在使用MUI号码字段时删除向上和向下箭头。我使用的是5.3.0版本。在 sx prop 中可能吗？ sx 道具我想在使用 MUI 编号字段时删除向上和向下箭头。我正在使用版本5.3.0。在 sx 道具中可能吗？ sx 道具 <TextField sx={{...}} id="outlined-number" label="Number" type="number" /> 从文档来看， type 属性接受有效的 HTML 输入类型。我相信出现向上和向下箭头的原因是因为您指定了数字作为类型。尝试使用 type="tel"，因为它似乎是电话号码的标准输入类型。这里是电话类型的参考以及为什么使用它是个好主意。请注意，如果当前浏览器不支持它，它将回退为常规文本字段我在这里找到了这个答案：如何从 mui 数字字段中删除向上和向下箭头？首先将className添加到NumberField组件中 <NumberField className="no-spinners" /> 这对我有用。（CSS 方法） .no-spinners input[type="number"]::-webkit-inner-spin-button, .no-spinners input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: textfield; margin: 0; } 您可以创建自定义样式： import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ customNumberField: { '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': { '-webkit-appearance': 'none', margin: 0, }, '& input[type="number"]': { '-moz-appearance': 'textfield', }, }, }); function MyComponent() { const classes = useStyles(); return ( <TextField className={classes.customNumberField} label="Number" type="number" // other props /> ); } 有点晚了，但我最近偶然发现了这个，是的，可以使用 sx 属性： <TextField sx={{ "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": { display: "none", }, "& input[type=number]": { MozAppearance: "textfield", }, }} id="outlined-number" label="Number" type="number" /> 这对我有用。以下是隐藏箭头的样式 Mui组件 <OutlinedInput onFocus={handleInputFocus}/> input[type='number'] { -moz-appearance: textfield; } const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>) => { e.target.addEventListener('wheel', function (e) { e.preventDefault(); }); }; 用于删除滚动增加和减少行为的脚本

css material-ui

回答 5 投票 0

如何在 Material UI 的 <DatePicker/> 中访问年份选择器的 sx 属性？

我正在 Material UI 中使用 DatePicker 组件。我想访问年份选择器部分的 sx 道具，但我不知道如何访问。我尝试过的：我尝试使用 slotProps 和 sx props 来访问 t...

reactjs typescript material-ui

回答 1 投票 0

反应|材质-Ui |可滑动抽屉无法通过滑动打开

我正在开发一个新项目并尝试创建一个“菜单”或抽屉。这个想法是当用户从屏幕左侧滑动时它会打开。这是一个可以运行的 codeSandBox...

reactjs material-ui

回答 3 投票 0

json数据的日期格式为ISO 8601格式我想将格式更改为dd/mm/yy

从“react”导入 React, { useState };从“材料反应表”导入{MaterialReactTable}；从“fuse.js”导入保险丝；导入 { 滑块、文本字段、图标按钮、