文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Materials UI中更改选项卡组件的大小？

问如何在Materials UI中更改选项卡组件的大小？
EN

Stack Overflow用户

提问于 2020-05-25 12:57:52

回答 2查看 1.7K关注 0票数 3

我正在开发一个简单的应用程序来显示心率，血糖水平和其他几个测量数据。我在React和Redux中工作，并使用Materials UI作为UI。

为了显示这两个数字，我创建了一个组件，它将显示在屏幕的每一半上。在每个数字下，我将有一组选项卡在组件的视图中进行切换。

我想调整标签的大小到正确的大小，但它目前太大了，占用了太多的空间。如何将选项卡大小调整为更小。我有以下创建选项卡的代码，并且已经通读了this和this，但不确定如何做到这一点。

我尝试使用withStyles(样式)，如下所示，但它不能正常工作。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';


const BottomTab = ({}) => (
  <Grid item direction="column" alignItems="center" justify="center">
      <Tabs
        value={0}
        indicatorColor="primary"
        textColor="primary"
        variant="fullWidth"
      >
        <Tab label="Current" />
        <Tab label="Set New" />
        <Tab label="Alarm" />
      </Tabs>
  </Grid>
);
const styles = {
  tab: {
      width: '10', // a number of your choice
  }
};

export default withStyles(styles)(BottomTab);

下面的代码块是我调用BottomTab的地方。

interface Props {
  labelId: string,
  value: number
}

const Knob = ({labelId, value}: Props) => (
  <Grid item container direction="row" alignItems="center" justify="center">
    <Grid item xs>
      <ValueDisplay labelId={labelId} value={value} />
    </Grid>
    <Grid item container direction="column" alignItems="center" justify="space-evenly">
      <BottomTab />
    </Grid>
  </Grid>
)

export default Knob

javascript

html

css

reactjs

material-ui

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-25 13:32:11

在BottomTab中，您应该在中创建一个具有属性minWidth: <your tab size>的类，然后使用此类设置Tab组件的样式，如下所示：

const useStyles = makeStyles((theme) => ({
  ...
  tabs: {
    '& button': {
      minWidth: 50
    }
  }
}));

const BottomTab = ({}) => {
  const classes = useStyles()
  return (
  <Grid item direction="column" alignItems="center" justify="center">
      <Tabs
        value={0}
        indicatorColor="primary"
        textColor="primary"
        variant="fullWidth"
        className={classes.tabs}
      >
        <Tab label="Current" />
        <Tab label="Set New" />
        <Tab label="Alarm" />
      </Tabs>
  </Grid>
)
};

票数 2

Stack Overflow用户

发布于 2020-05-25 13:12:58

您是否尝试过将组件添加到其自己的网格中，然后更改其大小。可能行不通，但值得一试。注:很抱歉回答，但由于声誉限制，我还不能发表评论。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61996055

复制

相似问题

问如何在Materials UI中更改选项卡组件的大小？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Materials UI中更改选项卡组件的大小？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Materials UI中更改选项卡组件的大小？
EN