我有一个 material-ui 自动完成元素
<Autocomplete
id="combo-box-demo"
autoHighlight
openOnFocus
autoComplete
options={this.state.products}
getOptionLabel={option => option.productName}
style={{ width: 300 }}
onChange={this.selectProduct}
renderInput={params => (
<TextField {...params} label="Select Product Name" variant="outlined" />
)}
/>;
当我单击按钮时，我希望该元素获得焦点。
我尝试使用这里描述的引用如何以编程方式聚焦输入
它适用于其他元素但不适用于自动完成
请帮忙
我正在使用 amaterial-ui button并尝试通过样式组件覆盖边界半径（即，使其为 0）。但是，它不起作用。
代码：
import React from "react";
import styled from "styled-components";
import { Button } from "@material-ui/core";
const StyledButton = styled(Button)`
background-color: #d29d12;
border-radius: 0;
`;
export default function App() {
return <StyledButton>Hello</StyledButton>;
}
我在 Material-UI 中有一个选项卡组件，我想在其上实现一个工具提示。
我的问题是，当我单击选项卡组件时，工具提示并没有消失。我单击该选项卡后它必须消失。
目前，即使我单击该选项卡，它仍然可见。
我该如何纠正这个问题？
<Tabs
className="navbar-routes"
value={value}
style={{ color: 'green'}}
indicatorColor="secondary"
onChange={handleChange}
>
{
tabsData.map(({id,title,description}) => {
return(
<ToolTip description={description}>
<Tab
style={{
minWidth: 10,
fontSize: '80%',
fontWeight: 'bold',
marginLeft: '-4px',
marginRight: 4
}}
key={id}
component={Link}
to={`/${title}`}
label={`${title}`}
/>
</ToolTip>
);
}
)}
</Tabs>
所以我只是想知道使用一个而不是另一个的区别或原因是什么......
export function Name() { return <div /> }
对比
export const Name = () => { return <div /> }
我可以Slider使用以下方法修改样式withStyles：
const CustomSlider = withStyles(theme => ({
disabled: {
color: theme.palette.primary.main
},
thumb: {
height: 24,
width: 24,
},
}))(Slider);
但拇指的height和仅当组件为 时才适用。widthdisabled={false}
有没有一种简单的方法来更改滑块height和width打开disabled={true}？
演示： https://codesandbox.io/s/slide-thumb-size-gxb4g?file =/demo.js
我正在创建一个表单，material-ui我正在使用Formik和Yup进行验证。
TextField 组件工作正常，但是，该KeyboardDatePicker组件在控制台中出现以下错误
_onChange 不是函数
现在正在展示
类型未定义。
下面是带有代码的 cbs。 https://codesandbox.io/s/agitated-dust-wf6fn
我尝试编写正在使用formik和yup验证的多个错误行。使用后this.createError()，它将错误消息转换为字符串而不是数组{errors: '4 errors occurred'}。
我所做的示例代码：
const messages = [
{ key: "length", message: "should have password at least 8 characters" },
{ key: "notRepeat", message: "should not repeat old password" }
];
this.createError({
path: `${this.path}`,
message: messages,
errors: messages
});
我需要的是错误，我需要它作为消息返回（[]）康斯坦斯，然后我通过 UI 显示错误列表。
有任何意见或建议来解决这个问题吗？
谢谢。
我正在使用 Material UI 背景，并希望在其中有一些微小的形式。但每当我点击它的孩子时，背景就会关闭，onClick这要归功于它应该切换背景。
有什么方法可以阻止背景onClick从内部背景（它的孩子）触发？
我尝试过useRef在内部使用元素，但对我来说，对元素有多个引用并在切换功能中检查它们（如果它应该隐藏背景）似乎很疯狂。另外，我无法访问背景内的某些元素；
const handleBackdropToggle = e => {\n console.log(e.currentTarget === backdropRef.current);\n if (e.currentTarget === backdropRef.current) {\n setOpen(!open);\n }\n};\n\nconst handleToggle = e => {\n setOpen(!open);\n};\nconst handleBackdropToggle = e => {\n console.log(e.currentTarget === backdropRef.current);\n if (e.currentTarget === backdropRef.current) {\n setOpen(!open);\n }\n};\n\nconst handleToggle = e => {\n setOpen(!open);\n};\n我是材质 UI 的新手。在这里，我试图覆盖材质 UI 的 CSStabs component.
<Tab
key={`${tab}_${index}`}
classes={{
flexcontainer: css.tabFlexContainer
}}
disableRipple
label={tab.label}
value={tab.value}
icon={
tab.icon ? <Icons className={css.tabIcons} iconname={tab.icon} /> : null
}
/>
所以，在这里我试图flexContainer用这个 CSS覆盖类：
. tabFlexContainer {
width : 100%
justify -content :space-between
}
所以，当我使用时，我只会收到编译时间错误，
TS2769：没有与此调用匹配的重载。
谁能帮我这个？
I'm using the React Material UI's Select Component. I wish to remove or speeden the animation that comes when the menu is opening. I tried something like:
<Select
...
TransitionComponent={({children}) => children}
>
<MenuItem value={...}>...</MenuItem>
...
</Select>
但这不起作用，请帮忙