实施Google Material Design的React组件。 http://material-ui.com
我正在尝试将材料自动完整小部件与Google Place AutoComplete功能相结合。 我的代码如下：
Https：//codesandbox.io/s/material-demo-w385hh） 代码： <TextField className={classes.margin} id="input-with-icon-textfield" label="TextField" InputProps={{ startAdornment: ( <InputAdornment position="start"> <AccountCircle /> </InputAdornment> ) }} /> 我希望使用材料-UI道具的干净解决方案。 我发布此信息后立即实现了解决方案： https：//codesandbox.io/s/material-demo-w385h 设置一个变量以在IconAdornment时包含我们的InputProps。 isSelected === true：OnFocus和setIsSelected(true)：OnBlur setIsSelected(false) 我使用Onblur/onfocus设置状态的效果少于Steller的结果，似乎Onblur在每种情况下都没有被调用，因此我通过查看MUI类解决了这一点。 const [isSelected, setIsSelected] = useState(false); const iconAdornment = isSelected ? { startAdornment: ( <InputAdornment position="start"> <AccountCircle /> </InputAdornment> ) } : {}; return ( <TextField className={classes.margin} id="input-with-icon-textfield" label="TextField" InputProps={iconAdornment} onFocus={e => setIsSelected(true)} onBlur={e => setIsSelected(false)} /> ); 当父母拥有以MUI为重点的课程时，请显示元素。 请注意，这将适用于两个开始/结束装饰，因此，如果您只想隐藏其中一个，则可能需要进行一些调整。
因不弃用：https：//mui.com/system/styles/basics/。我正在尝试使用SX Prop实施新方法。 我很难了解如何将其与React-Admin组件一起使用....
我正在创建一个用于采用宠物和材料UI中的宠物的清单页面。在首页上，我面临着有关无线电按钮未对准的问题，并带有标签。
使用 @testing-library/react”：“^16.0.1”，我想知道正确的方法来处理我当前的情况。 这是我的过滤器窗格[使用类似于
next.js13+应用程序路由器项目中测试样式的按钮组件，但是在检查悬停的样式更改时，我的测试失败了。
i使用ng生成 @angular/材料：m3-theme生成主题颜色并将其应用于style.scss.scss，但是当我这样做时 style.scss @USE'@angular/材料'作为垫子； @USE'./_theme-colors.scss'as ...
我为我的项目创建了一项手风琴。但是我希望仅在单击扩展图标时才扩展面板。目前，它正在扩展到面板上的任何位置。我们可以自定义其不断扩展的行为吗？
我正在使用ChromeDriver以无头模式看到硒中的问题，并使用MUI组件，该组件在过渡似乎并未触发的地方使用淡出。
没有无头，并且组件变得可见。 （这使对故障排除变得棘手）。
这是我现在拥有的： HTML代码是此（我正在使用react的材料-UI）： {Optio ...
因此，我在jaws屏幕阅读器中遇到了这个问题。在浏览器中，这是完整的HTML 因此，我在jaws屏幕阅读器中遇到了这个问题。在浏览器中，这是完整的html <span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-31 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary" aria-disabled="false"><span class="MuiIconButton-label"><input class="PrivateSwitchBase-input-34" tabindex="0" type="checkbox" data-indeterminate="false" aria-label="Add [email protected] [email protected] to selected items" value=""><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></span><span class="MuiTouchRipple-root"></span></span> 在上面的代码中，这是我在组件中的代码 <Checkbox checked={isSelected} onChange={onSelect} inputProps={{ 'aria-label': checkboxAriaLabel || 'Select item', tabIndex: 0, }} onFocus={(e) => { e.target.style.outline = `2px solid ${ 'pink'}`; e.target.style.outlineOffset = '2px'; }} onClick={(e) => e.stopPropagation()} /> 我的问题是屏幕阅读器可以阅读ARIA标签，但焦点戒指指示器未显示 这是正常行为。箭头键，当使用下巴时，请勿将系统焦点移动。他们要做的是允许用户在所谓的虚拟缓冲区中导航。一个网页表示为一种文本环境，用户可以通过字符，word，line，select，select，标记位置，按HTML元素（例如标题，按钮，表单字段等）进行移动。这称为虚拟光标模式。 因此，在您的情况下，TAB可以按预期工作，并且箭头键不会。当我本人盲目时，我无法告诉您当您不使用屏幕阅读器并按下箭头键时，视觉上会发生什么。我相信在这种情况下，重点应该移动，但我不是100％确定的。 另外，与您的问题没有真正的关系，但我不能保持沉默：您的aria-label是冗长的。它应该像John Doe, [email protected]。因为屏幕读取器说“复选框，（未检查）”，因为“添加到选择”含义是传达的。就是这样。查看如何完成Windows或Office设置。有一个复选框，上面写着“显示工具提示”，而不是“转动显示在上方的工具提示”之类的东西。这不是您的错，这是我们盲人社区正在宣讲的现代趋势之一。
I将添加/编辑零件移至单独的对话框组件中，上面有自己的表单（源自父式架构），并在提交该对话框时修改了实际父级data。 不幸的是，在提交对话框时，父母表格也提交，这是一种不希望的行为。
使用Textfield时，我们可以添加一个自定义主题以使标签缩小默认 Muitextfield：{ DefaultProps：{inputlabelProps：{缩小：true}}， }，， 与自动完成