标签: material-ui

我链接了一个代码沙箱示例程序Sample Program，在这里我们可以注意到，一旦我们从选项中选择一个项目，它仍然处于聚焦状态，但我不希望它在选择选项后获得聚焦。

有人可以帮忙解决这个问题吗，提前致谢:)

我想自定义日期选择器，并尝试从 MUI X 日期选择器的输入中删除填充，但没有任何效果。我在这里做错了什么或者 MUI X 不支持样式吗？

import { styled } from '@mui/material/styles';
import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { TextField } from '@mui/material';


const DateDisplay = styled(DesktopDatePicker)(({ theme }) => ({
  '& input':{
   padding: 0,
},
}));


  return (
    <ModalDialog>
      <div>
        
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <DateDisplay
            value={new Date()}
            readOnly
            onChange={() => {}}
            renderInput={(params) => <TextField {...params} />}
          ></DateDisplay>
        </LocalizationProvider>
      </div>
    </ModalDialog>
  );
};

我正在尝试动态地将社交媒体图标添加到我的 React 网站，并且我找到了 Facebook、Instagram、Youtube 和 Twitter 的图标。但我无法添加 TikTok 徽标。

MUI React Material 图标目录（请参阅此处）似乎没有 TikTok 图标，但该网站似乎提到有一个。

然而，当尝试导入图标时，它说它不存在。这是我的代码示例：

import { Instagram, TiktokIcon, Facebook, YouTube, Twitter } from "@mui/icons-material"


    export const socialMediaLinks = [
    {
        platform: 'Instagram',
        link: '',
        icon: <Instagram/>
    },
    {
        platform: 'Tiktok',
        link: '',
        icon: <TiktokIcon/>
    },
    {
        platform: 'Facebook',
        link: '',
        icon: <Facebook/>
    },
    {
        platform: 'Youtube',
        link: '',
        icon: <YouTube/>
    },
    {
        platform: 'Twitter',
        link: '',
        icon: <Twitter/>
    }
]

{socialMediaLinks.map((social) => (
                <a …

我们正在使用 React 和 Material UI 开发一个 Web 应用程序，我们需要考虑可访问性，这意味着我们的 Web 应用程序应由残疾人使用。

因此，Web应用程序需要可通过键盘操作。

必须能够通过 Tab 键浏览表单并使用 Enter 来触发某些操作。对于输入和按钮，这工作得很好。然而，对于复选框来说存在一个问题。我可以使用选项卡关注复选框，但无法使用 Enter 选中复选框。

当我使用 onChange/onClick 时，仅当我使用鼠标时才会选中复选框：

<Checkbox
     checked={this.state.statementNecessary}
     onChange={() => {
              this.setState({ statementNecessary: !this.state.statementNecessary })}} />

当我使用 onChange/Onclick + onKeyDown 时，我可以使用选项卡聚焦复选框，但是当我再次使用选项卡时，即使我只想转到下一个输入元素，复选框也会被选中。

<Checkbox
     checked={this.state.statementNecessary}
     onKeyDown={() => {
              this.setState({ statementNecessary: !this.state.statementNecessary })}}
     onChange={() => {
              this.setState({ statementNecessary: !this.state.statementNecessary })}} />     

任何提示表示赞赏。

我们正在尝试使用 React MUI 设计一个选项卡页面。我们希望每个选项卡中都有一个子组件。当我们将这些子组件添加到没有 Tab 的单个页面时，没有问题，但是当我们将它们添加到 MUI 的 Tab 和 TabPanel 组件时，就会出现重新渲染问题。从一个选项卡切换到另一个选项卡时，前一个选项卡中的所有字段和状态都将被删除。

我还添加了一个例子。

标签页组件：

export default function LabTabs() {
  const [value, setValue] = React.useState('1');

  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%', typography: 'body1' }}>
      <TabContext value={value}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <TabList onChange={handleChange} aria-label="lab API tabs example">
            <Tab label="Item One" value="1" />
            <Tab label="Item Two" value="2" />
            <Tab label="Item Three" value="3" />
          </TabList>
        </Box>
        <TabPanel value="1">
          <Deneme /> …

我的问题很简单，但我不知道如何解决这个问题，当打开 MaterialUI 的抽屉时，会在我的页面主体中添加一些 css，其中一个 css 添加一个 padding-right ，这会拧紧页面缩进。

抽屉关闭：

抽屉打开：

问题：

代码：

<React.Fragment key={"menu-button"}  >
      <MenuIcon onClick={toggleDrawer(true)} />
      <Drawer
        anchor={"left"}
        open={state}
        onClose={toggleDrawer(false)}
        
      >
        <Box
          sx={{ width: 250, height: '100%'}}
          className={styles.background}
          role="presentation"
          onClick={toggleDrawer(false)}
          onKeyDown={toggleDrawer(false)}
        >
          <List>
            {['About me', 'Projects', 'Experience', 'Education'].map((text, index) => (
              <ListItem key={text} disablePadding>
                <ListItemButton className={styles.option}>
                  <ListItemIcon className={styles.optionIcon}>
                    {icons[index]}
                  </ListItemIcon>
                  <ListItemText primary={text} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
          
        </Box>
      </Drawer>
    </React.Fragment>

样式仅添加颜色。

我正在尝试将我的开关设计为具有某种颜色，然后禁用，并且在启用时具有某种颜色，我当前的代码如下所示，我想使用 makeStyles，这里的问题是轨道只有在禁用时才会获得橙色。

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
  // style class
  switch: { 
      "& .MuiSwitch-thumb": {
        backgroundColor: "orange",
      },
      "& .MuiSwitch-track": {
        backgroundColor: "orange",
      },
    },
  }))
  
  
 <Switch /*color="primary"*/ className={classes.switch} disabled={!oneRepMax} size="small" checked={check} onChange={handleSwitch} />

我正在使用 MUI 数据网格（麻省理工学院许可版本）。

我将列设置为flex，因为我希望它们填满可用宽度。但是，如果表格调整得太小，我希望表格溢出（需要滚动）。

例如，对于电子邮件列，我希望它的宽度永远不会小于最长电子邮件的宽度（因此文本永远不会有...），但让它扩展其宽度以填充可用空间。

我知道我可以number为列设置 minWidth，但无法设置auto或类似的内容。有什么办法可以做到这一点，如果列中的某些数据太大，数据网格就会溢出？

我在 MUI 中有一个数据网格，其中每个按钮都有一个编辑按钮。我在列定义的操作中实现了编辑按钮。

正如我在文档中看到的，MUI 有一个 startCellEditMode 函数，可以用作：

  const handleEditClick = (id: GridRowId) => () => {
    apiRef.current.startCellEditMode({ id, field: 'text' });
  };

现在我想在编辑按钮的单击上使用这行代码，但它不起作用，并且出现此错误：

apiRef.current.startCellEditMode is not a function

我的函数被正确调用，但相应的单元格没有进入编辑模式

当我将鼠标放在登录按钮上时，按钮的背景颜色不会保持白色。怎样才能保持白皙呢？请帮帮我。我尝试过，但没有成功。

<Button
  key={item}
  sx={{
   color: "secondary.contrastText",
   backgroundColor: "secondary.light",
   "&:hover": {
      backgroundColor: "transparent"
    }
   }}

代码在codesandbox中