我需要在 Material ui 中的扩展面板打开时为其指定颜色。我们如何在 Material ui 中覆盖它？这是https://codesandbox.io/s/yp9lmvwo1x的链接

我正在使用 Material UI 和 ReactJS。我想覆盖按钮颜色，但在我的情况下，它也会更改选项卡颜色（参见屏幕截图）如何使用材质 UI 中的主题仅覆盖按钮颜色？代码：

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#DDB61A',
        },
        secondary: {
            main: '#1d83c6',
        },
    },
});


<MuiThemeProvider theme={theme}>
    <AppBar position="static">
           <Tabs value={value} onChange={this.handleTabChange}>
           <Tab label="USDT" />
           <Tab label="BTC" />
           <Tab label="ETH" />
           </Tabs>
        </AppBar>

    {value === 0 && <TabContainer>
    <Button variant="contained" color="primary" fullWidth={true}>
              Buy/Login
         </Button>
    </TabContainer>}
</MuiThemeProvider>

第二种方法也不起作用：

    const theme = createMuiTheme({
        palette: {
            myBtn: {
                main: '#DDB61A',
            }
        }
    });

<MuiThemeProvider theme={theme}>    
    <Button variant="contained" color="myBtn" fullWidth={true}>
          Buy/Login
    </Button>
</MuiThemeProvider>

截屏：

我试图从父组件中的按钮单击事件调用子组件中的函数。

父组件：

class Parent extends Component{
    constructor(props){
        super(props);
        this.state = {
            //..
        }
    }

    handleSaveDialog = (handleSaveClick) => {
        this.handleSaveClick = handleSaveClick;
    }

    render(){
        return(
            <div>
                <Button onClick={this.openDialog}>Open Dialog</Button>
                <Dialog>
                    <DialogTitle id="form-dialog-title">Child Dialog</DialogTitle>
                    <DialogContent>
                        <Child handleSaveData={this.handleSaveDialog}/>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleSaveClick} color="primary">
                            Save
                        </Button>
                    </DialogActions>
                </Dialog>       
            </div>  
        );
    }
}

在上面的代码中，父组件在单击按钮时呈现子组件模式对话框（基于 Material-UI）。“保存”按钮是Dialog父组件中组件的一部分，单击时应调用Child组件中的保存函数。如您所见，我handleSaveDialog通过Child名为 的组件 props传递了一个回调函数handleSaveData。handleSaveClick一旦子组件安装并将回调传递给父组件，单击“保存”按钮将调用子组件。

子组件：

class Child extends Component{
    constructor(props){
        super(props);
        this.state = {
            //..
        }
    }

    componentDidMount(){
        console.log('mount'); …

我正在使用 Material-UI for React。

这是我迄今为止拥有的 UI，但我希望Submit按钮具有与Select组件相同的高度。

我试图给height: 100%按钮

    <Button
      style={{ height: "100%", width: "30%" }}
      variant="contained"
      color="primary"
    >
      Submit
    </Button>

但这并没有真正改变高度。

这是codesandbox的链接：https://codesandbox.io/embed/material-demo-nvcxk ?fontsize=14&hidenavigation=1&theme=dark

我怎么了，你能告诉我2做了什么吗？

我正在创建一个需要钩子来替换状态的网站。我在我的index.js 上。错误发生在菜单内 div 内的 onClicks 上。菜单来自material-UI

我的代码：

import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

export default function SimpleMenu() {
    const [ anchorEl, setAnchorEl ] = React.useState<null | HTMLElement>(null);
    const [ language, setLanguage ] = useState('English');
    const languages = [ 'English', 'Chinese ( Simplified )', 'Chinese ( Traditional )' ];

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = (word: string) => {
        setLanguage(word);
    };

    return (
        <div>
            <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}> …

创建了一个叫图片上传的按钮，选中时需要查看选中的图片

     <GridItem xs={6}>
        <FormControl className={classes.formControl}>
          <input
            accept="image/*"
            className={classes.input}
            style={{ display: 'none' }}
            id="raised-button-file"
            multiple
            type="file"
          />
          <label htmlFor="raised-button-file">
            <Button
              variant="raised"
              component="span"
              className={classes.button}
            >
              Upload Image
            </Button>
          </label>
        </FormControl>
      </GridItem>

这是我的代码。我尝试在工具提示的标题属性中使用材质图标（PhoneInTalk）。但我的流程似乎不起作用。这是我的输出： 在此处输入图像描述

//@material-ui/core/styles
const CustomTooltip = withStyles({
  tooltip: {
    color: "tomato",
    backgroundColor: "black",
    fontWeight: "bold",
    fontSize: "12px",
  },
})(Tooltip);

//JSX
<CustomTooltip
        title={`${(<PhoneInTalk />)} Let's talk`}
        placement="top-end"
        arrow
        >
<Avatar className={classes.avatar} src={avatar} alt="Ibrahim Kaiser" />
</CustomTooltip>

我有一个带有几个复选框的下拉菜单，我试图在每个复选框上添加 onClick 事件。但是当我选中其中一个复选框时，所有复选框都会被选中。这就是我尝试做的：

const [isChecked, setIsChecked] = React.useState(false);

const isCheckboxChecked = () => {
    setIsChecked(isChecked ? false : true)
}

return menuItems.map((item, index) => (
        <React.Fragment>
            <MenuItem
                value={item.value}
                selected={item.value === value}
                key={index}
            >
                <Checkbox
                    key={index}
                    checked={isChecked}
                    onClick={() => isCheckboxChecked()}
                >
                    <Label>{item.label}</Label>
                </Checkbox>
            </MenuItem>
            {index === 2 || index === 3 ? <hr /> : null}
        </React.Fragment>
    ));

据我了解，所有复选框都使用相同的状态isChecked，我想知道如何使它们独立。

我查看了文本字段演示，其中它们在开始和结束时显示输入装饰，但我想要在末尾有两个输入装饰，并且我尝试使用 endAdornment: {InputAdornment InputAdornment} 但随后出现错误，指出相邻的 JSX 元素必须具有一个父元素。然后我使用了 div 标签，但随后出现错误，提示我的括号放错了位置。这就是我想要的输入装饰的样子

我使用这里的滑块： https: //material-ui.com/components/slider/

尝试将其值设置为：

cy.get("[data-cy=slider-population]")
    .as("range")
    .invoke("val", val)
    .trigger("change");

然而它没有动。有人设法让这个工作吗？