标签: material-ui

我正在尝试在已经具有 title 属性的组件上使用 Material-UI Tooltip 组件。我必须使用带有 title 道具的 child 。有什么方法可以使用 Material-UI 工具提示，还是需要寻找其他方法？

<Tooltip title='Disabled' aria-label='disabled button'>
  <RequiredImportedButton title={this._getTitleMessage()} />
</Tooltip>

Material-UI 抛出此错误：

titleindex.js:2178 警告：Material-UI：您已向 的子级提供了一个属性<Tooltip />。删除此标题属性Delete或工具提示组件。

感谢您提供的任何帮助。

我正在尝试使用 Material-ui 框架创建一个英雄横幅。

到目前为止我所看到的如下：

正如您所看到的，左右填充很烦人。我似乎无法摆脱它。

我的英雄组件如下所示：

import React from 'react'

import Container from '@material-ui/core/Container'

import { makeStyles } from '@material-ui/core'

const useStyles = makeStyles((theme) => ({
    heroContent: {
        backgroundColor: theme.palette.background.paper,
        padding: theme.spacing(8, 0, 6),
    },
    heroButtons: {
        marginTop: theme.spacing(4),
    },
}))

const Hero = () => {
    const classes = useStyles()

    return <Container className={classes.heroContent}></Container>
}

export default Hero

有人可以解释一下如何去掉左侧和右侧的填充并实现全宽度吗？

我尝试在样式中设置填充，如您所见，但这没有效果。任何指导表示赞赏！

在 Material UI 中，显示图像的组件具有图像参数。例如：

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />\n

Next.js v10 中有一个新的Image自动缩放图像的组件：\xc2\xa0https://nextjs.org/docs/api-reference/next/image\xc2\xa0

有人知道如何Image在 Material UI 中使用新组件吗？

我使用 Material-ui 作为我的 CSS 框架，我想选择包含特定文本的按钮。我当前的代码：

cy.get('button').contains('Edit Claim').should('be.disabled');

它失败了，因为 Material ui 的按钮组件输出了 div 内的文本，因此 cypress 断言了 div 的禁用属性。我希望它断言到按钮。

编辑：

我想根据另一个输入值有条件地禁用输入。常见的用例是我们有一个复选框，我们需要禁用/启用相同表单中的另一个输入。我怎样才能用react-hook-form来实现它？我想禁用，而不是提交时的验证。

目前，我正在使用FormControlLabel（material-ui）和react-hook-form。任何帮助将不胜感激。

更新！这是我的想法的一个小演示代码

import { Controller, useForm } from "react-hook-form";
import { FormControlLabel, Checkbox } from "@material-ui/core";

const { control } = useForm({/* some options */});

// Below is render function

<form onSubmit={handleSubmit(onSubmit)}>
  <Controller
  name="checkbox"
  control={control}
  render={({ field: { onChange, value }}) => {
    return (
      <FormControlLabel
        control={
          <Checkbox
            checked={value}
            onChange={e => {
              onChange(e.target.checked);
            }}
          />
        }
        label="Enable text input?"
        labelPlacement="end"
      />
    );
  }}
/>
<Controller
  name="text-input"
  control={control}
  render={({ field: { onChange, value } }) => {
    return …

当我迁移到 Material Ui 版本 5 时，我所有的样式开始具有较低的样式优先级

const useStyles = makeStyles((theme) => ({
    drawer: {
        [theme.breakpoints.down('md')]: {
            width: 0,
        }
    },
    drawerPaper: {
        background: theme.palette.primary.main,
        width: drawerWidth,
    },
}))

我正在尝试使用主题覆盖进行样式设置，如此处文档中所述：

我有以下代码沙箱：

import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Select from '@mui/material/Select'
import MenuItem from '@mui/material/MenuItem'

const theme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        root: {
          background: '#000',
        },
      },
    },
  },
});

export default function GlobalThemeOverride() {
  return (
    <ThemeProvider theme={theme}>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            variant="standard"
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
    </ThemeProvider>
  );
}

选择框应该有背景，#fff但根本没有设置背景。:(

有谁知道如何通过 MUI 5 SX prop 使用多个 CSS 类？我创建了一个基类，我想将其与 Box 组件一起使用，但使用第二个类专门用于 Box 内部的文本。应用基类，例如sx={styles.baseBoxStyle}可以工作但sx={styles.baseBoxStyle styles.customBoxFontStyle}返回错误。下面提供了完整的代码片段和沙箱。非常感谢任何帮助！

沙盒：https://codesandbox.io/s/mui-5-styling-uqt9m?file =/pages/index.js

import * as React from "react";
import Box from "@mui/material/Box";

const styles = {
  baseBoxStyle: {
    backgroundColor: "red",
    borderRadius: "20px 20px 20px 20px",
    border: "1px solid black",
    maxWidth: "150px",
    margin: "20px",
    padding: "10px"
  },
  customBoxFontStyle: {
    color: "yellow",
    fontWeight: "bold"
  }
};

export default function Index() {
  return <Box sx={styles.baseBoxStyle styles.customBoxFontStyle}>This is a test</Box>;
}

我目前正在使用ReactJS + Material-UI,而使用Material-UI <Table>,列宽会根据内容自动设置.目前似乎在所有列上强制执行相等的宽度,但我希望某些列占用的宽度比其他列宽.

那么有没有办法任意分配<TableRow>列的宽度,而仍然是基于内容的动态？

如何将React函数转换为类？我不明白如何const { classes } = props;在函数中更新类使用.以下是Material UI的按钮功能:https://material-ui-next.com/demos/buttons/

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

function RaisedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Button variant="raised" className={classes.button}>
        Default
      </Button>
      <Button variant="raised" color="primary" className={classes.button}>
        Primary
      </Button>
      <Button variant="raised" color="secondary" className={classes.button}>
        Secondary
      </Button>
      <Button variant="raised" color="secondary" disabled …