标签: material-ui

I currently have a Material-UI's <Table/> ( http://www.material-ui.com/#/components/table ), and would like each row to switch off between color blue and purple. So first one would be blue, then next row would be purple, and so on for any additional row added.

How can I dynamically switch off between two colors for any additional rows added?

render(){

    return(
        <Table
          multiSelectable={true}
        >
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>First Name</TableHeaderColumn>
              <TableHeaderColumn>Last Name</TableHeaderColumn>
              <TableHeaderColumn>Color</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody
            displayRowCheckbox={true}
            stripedRows
          >
              <TableRow>
                <TableRowColumn>John</TableRowColumn>
                <TableRowColumn>Smith</TableRowColumn>
                <TableRowColumn>Red</TableRowColumn>
              </TableRow>
              <TableRow> …

如何在两个 Typography 组件之间添加一个空格并将它们对齐到底部？

这是我的代码：

  <div style={{ display: "flex" }}>
    <Typography variant="title" color="inherit" noWrap>
      Project:
    </Typography>
    <Typography variant="body 2" color="inherit" noWrap>
      Example
    </Typography>
  </div>

它看起来像这样：

工作示例：https : //codesandbox.io/s/llqry78p29

使用 Material UI，我希望 Table 的 TableBody 的最大高度为 500px。如果有任何行无法容纳在 TableBody 的高度内，则 TableBody 应垂直滚动，同时 TableHead 锁定到位（冻结）。

这是我的代码：

import React from "react";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';

const data = ["1", "1","1","1","1","1","1","1","1","1","1","1","1","1"];

class Demo extends React.Component {
  render() {
    return (
      <div>
        <Table>
          <TableHead>
            <TableRow style={{ 'backgroundColor': '#f5f5f5', "height": '35px' }}>
              <TableCell>Column 1</TableCell>
              <TableCell>Column 2</TableCell>
              <TableCell></TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map(n => {
              return (
                <TableRow key={n}>
                  <TableCell>{n}</TableCell>
                  <TableCell>{n}</TableCell> …

希望能够在 Material UI 中为平板电脑的样式对象设置纵向和横向视图

const styles = theme => ({
  root: {
    padding: theme.spacing.unit,
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.secondary.main
    }
  }
}

我如何为类似于传统媒体查询的纵向视图和横向视图添加断点：

@media screen and (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

我希望在 React 中使用 Material UI 制作多个滚动列。我有一种在引导程序中使用 flex 进行的方法，但我无法将其翻译过来。我已经整理了一个 hacky 方法的演示，它需要知道您要滚动的内容的大小（在本例中为 AppBar）

https://codesandbox.io/s/pmly895mm

html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
}

.grid-container {
  height: calc(100% - 64px);
}

.grid-column {
  height: 100%;
  overflow-y: auto;
}

在这个演示中，我将所有的高度设置为 100%（html、body、#root），然后创建了两个grid-container高度为 100% 的类 - AppBar 高度和grid-column高度为 100% 并且溢出-y 为 auto。

在 Bootstrap 中，我会将这些类分别应用于row和column元素

.flex-section {
  flex-grow: 1;

  display: flex;
  flex-direction: column;

  min-height: 0;
}

.flex-col-scroll {
  flex-grow: 1;

  overflow: auto;

  min-height: 100%; …

在这个https://material-ui.com/utils/popover/#mouse-over-interaction 的例子中material-ui

对于示例https://material-ui.com/utils/popover/#mouse-over-interaction，请按照以下步骤操作 material-ui

1. 在上面的示例中，将鼠标保持在文本上Hover with a Popover. --- 您会看到popover

2. 尝试将鼠标移到popover---附近popover消失，对吗？但即使我悬停在上面，我也想显示弹出框 popover

并使只有酥料饼的消失，如果用户未悬停在任popover或Hover with a Popover.（基本上anchorEl）

我正在从他们的演示中复制代码

  import React from 'react';
    import PropTypes from 'prop-types';
    import Popover from '@material-ui/core/Popover';
    import Typography from '@material-ui/core/Typography';
    import { withStyles } from '@material-ui/core/styles';

    const styles = theme => ({
      popover: {
        pointerEvents: 'none',
      },
      paper: {
        padding: theme.spacing.unit,
      },
    });

    class MouseOverPopover extends React.Component {
      state = {
        anchorEl: …

Material ui 在 List 和 ListItem 上添加默认填充如何删除它？对资源的任何帮助或方向将不胜感激。

也许不是正确的方法，但我想为标题创建一些“全局”样式。像这样的东西：

const myTheme = createMuiTheme({
    headings: {
        h1: {
            fontSize: 28,
            // Obviously this does not work...
            [theme.breakpoints.down('sm')]: {
                fontSize: 24
            },
        },
        h2: {
            fontSize: 24,
        }
    }
}

然后我可以像这样在我的组件中使用它们：

const styles = (theme) => ({
    myElement: {
        ...theme.headings.h1,
        // ... other styles
    }
}

这确实有效，但我面临的问题是我希望标题具有响应性并尊重 Material UI 的断点，但我不能在 createMuiTheme 本身中使用它们？有什么方法可以正确执行此操作，以便我可以将所有样式都包含在响应式样式中？

我想在 Material-UI Paper 组件中垂直对齐一些文本。

代码在这里：https : //codesandbox.io/embed/material-demo-fz9wj

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
    height: 200,
    verticalAlign: 'middle'
  },
}));

function PaperSheet() {
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.root}>
        <Typography variant="h5" component="h3">
          This is a sheet of paper.
        </Typography>
        <Typography component="p">
          Paper can be used to build surface or other elements for your application. …

在使用 Material UI 中的选择时，我正在努力让它们正常工作，使用高度和宽度适当地使用“vh”和“vw”以及使用“vh”的文本大小。

我最终获得了合适的框大小，但由于显然使用“变换”从左上角偏移自身，因此标签文本不再居中。

无论如何，这就是我所拥有的：https : //codesandbox.io/s/material-demo-ujz2g

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    width: "20vw"
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  select: {
    height: "10vh"
  },
  inputLabel: {
    fontSize: "4vh",
    alignSelf: "center"
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const …