标签: material-ui

网格系统是12个，如何均匀地将5个项目排成一行？2.4 不起作用...提前致谢:)

我的代码：

    <Grid container spacing={10}>
        {data.map(item => (
          <Grid item xs={12} md={2.4}>
            <div style={{ fontWeight: "700", textTransform: "capitalize" }}>
              {item}
            </div>
          </Grid>
        ))}
      </Grid>

如果我同时使用它们，我会遇到冲突吗？这是一个很好的使用方法吗？

我正在使用 MUI 中的 DataGrid，在 GridColDef 内部我不使用任何与宽度相关的内容，我希望列具有最长数据的宽度，以便显示每个字母，这可能吗？

下面是我的 GridColDef：

{
field: 'lastLogin',
type: 'dateTime',
headerName: 'Last login',
align: 'right',
headerAlign: 'right',
}

我想使用打字稿从 Material-UI 扩展 Button 组件的道具，以便能够将其他道具传递给它的孩子。

import { NavLink } from 'react-router-dom';
import { Button } from 'material-ui';

<Button
  component={NavLink}

  // NavLink props that needs to be added to typescript declarations
  activeClassName={classes.activeButton}
  exact={true}
  to={to}
>
  {title}
</Button>

我尝试在 ./app/types/material_ui.d.ts 中添加以下声明：

declare module 'material-ui' {
  interface Button {
    activeClassName?: any;
    exact?: boolean;
    to?: string;
  }
}

这会引发错误“TS2693：'Button' 仅指一种类型，但在此处用作值。”。

我也试过声明：

import * as React from 'react';

import { PropTypes, StyledComponent } from 'material-ui';
import { ButtonBaseProps } from 'material-ui/ButtonBase';

declare module 'material-ui' { …

我正在使用 Material UI tabs v0.20.0 以表格格式显示内容。标签占用全宽。我附上了预期和当前输出的屏幕截图。

预期输出

电流输出

请让我知道相同的解决方案。

提前致谢

我正在为我的 React 应用程序使用 Material-UI@next。在一个特定组件中，我使用Expansion Panels显示项目列表。我还有一个简单的<Footer />组件，如下所示：

import React, { Component } from "react";

import styled from "styled-components";
import Typography from "material-ui/Typography";

const FooterContainer = styled.div`
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100% !important;
  height: 100px !important ;
  background: #6cf;
`;

class Footer extends Component {
  render() {
    return (
      <FooterContainer>
        <Typography variant="title">Footer Text</Typography>
      </FooterContainer>
    );
  }
}

export default Footer;

这是我在<Footer />项目列表下使用的代码片段：

  render() {
    return this.props.isFetching ? (
      <Typography>Loading...</Typography>
    ) : (
      <Container> …

目前，我正在努力将 MenuItem 组件的背景颜色设置为不同的颜色。（无需使用 !important 强制它）

组件代码：

<MenuItem
 classes={{
  root: this.props.classes.root,
  selected: this.props.classes.selected
 }}
 value={10}>
  Alfabetical
</MenuItem>

这是CSS：

const homePageStyle = (theme) => ({
  root: {
    width: "300px"
  },
  selected: {
    backgroundColor: "turquoise !important",
    color: "white",
    fontWeight: 600
  }
});

我想达到什么目标？

我想设置 MenuItem 的 backgroundColor 而不必设置 !important 标志。我已经用大量组件完成了这项工作，但目前这似乎行不通。

我正在使用版本“@material-ui/core”：“^1.0.0-rc.0”，

谢谢你的帮助。

当鼠标悬停在组件上时，我很难让 Material UI 工具提示真正出现。据我所知，我正在做工具提示组件的最简单实现：我直接导入它（没有自定义样式或其他任何东西），然后我将它包裹在另一个组件周围，该组件在顶层展开其道具。

从阅读文档来看，它应该是那么简单，但它并没有出现在悬停时，并且在 React DevTools 中，我看到 anchorEl 属性是未定义的。

import Tooltip from '@material-ui/core/Tooltip';

const containerComponent = () => (
    <Tooltip text="Planner"><PlannerIcon /></Tooltip>
)

规划器图标.js

const PlannerIcon = (props) => (
  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
    {...props}
  >
    <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
    <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
    <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
  </Icon>
  );

数据存储为：

 { iso: "gb", label: "United Kingdom", country: "United Kingdom" },
 { iso: "fr", label: "France", country: "France" }

传递给自动完成的值是：

{ iso: "gb", label: "United Kingdom", country: "United Kingdom" }

控制台报错

Material-UI：提供给自动完成的值无效。没有一个选项与{"label":"United Kingdom","iso":"gb","country":"United Kingdom"}.

报告的类型错误 value={}

输入'字符串| ICountry' 不可分配给类型 'ICountry | ICountry[] | 空| 不明确的'。类型 'string' 不能分配给类型 'ICountry | ICountry[] | 空| 不明确的'。

问题：将数据传递给组件并未将其设置为相应的选项，我对如何解决此问题一无所知。

问题代码沙盒：https ://codesandbox.io/s/charming-firefly-zl3qd?file =/ src/App.tsx

import * as React from "react";
import { Box, Typography, TextField, Button } from "@material-ui/core";
import { Autocomplete } …

我已经使用 MUI 和 React Hook Form 在 React 中构建了一个表单。我正在尝试创建一个用作Select Input的自定义TextField元素。我希望它是一个带有Ref道具的不受控制的组件。我试图按照 MUI 和 React Hook Form 文档的建议传递 inputRef 道具，但没有成功。

            <TextField
              id="id"
              name="name"
              select
              native="true"
              className={classes.textField}
              label="label"
              margin="normal"
              variant="outlined"
              inputRef={register({ required: "Choose one option" })}
              error={!!errors.name}
            >
              <MenuItem value="">Choose one option</MenuItem>
              <MenuItem value="3">03</MenuItem>
              <MenuItem value="6">06</MenuItem>
              <MenuItem value="9">09</MenuItem>
              <MenuItem value="12">12</MenuItem>
              <MenuItem value="16">16</MenuItem>
              <MenuItem value="18">18</MenuItem>
            </TextField>