时间戳

首页 > 解决方案 > 材料 UI 选项卡方向属性在反应 js 组件中不起作用

material-ui - 材料 UI 选项卡方向属性在反应 js 组件中不起作用

问题描述

我正在尝试借助 makestyle 设置 Material UI Tabs 方向，但是背景颜色已成功应用于根目录，但未应用垂直方向。

const useStyles = makeStyles((theme) => ({
  root: {
    background: "blue",
    orientation: "vertical",
  },
}));

export default function SignInUp() {
  const tabStyle = useStyles();
  <TabContext value={value.toString()}>
    <Tabs
      value={value.toString()}
      classes={{ root: tabStyle.root }}
      indicatorColor="primary"
      onChange={handleChange}
    >
      <Tab value="1" label="Sign In" />
      <Tab value="2" label="Sign Up" />
    </Tabs>
    <TabPanel value="1">
      <SignIn></SignIn>
    </TabPanel>

    <TabPanel value="2">
      <SignUp></SignUp>
    </TabPanel>
  </TabContext>;
}

标签： material-ui

解决方案

orientation不是 CSS 属性，而是您必须传递给Tabs组件的道具，如下所示：

const useStyles = makeStyles((theme) => ({
  root: {
    background: "blue",
  },
}));

export default function SignInUp() {
  const tabStyle = useStyles();
  <TabContext value={value.toString()}>
    <Tabs
      value={value.toString()}
      classes={{ root: tabStyle.root }}
      indicatorColor="primary"
      onChange={handleChange}
      orientation="vertical"
    >
      <Tab value="1" label="Sign In" />
      <Tab value="2" label="Sign Up" />
    </Tabs>
    <TabPanel value="1">
      <SignIn></SignIn>
    </TabPanel>

    <TabPanel value="2">
      <SignUp></SignUp>
    </TabPanel>
  </TabContext>;
}

有关更多信息，您可以查看Tabs 组件的 API。

推荐阅读