标签: material-ui

我想使用打字稿从 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> …

我读过类似问题的不同答案，但它们都是旧的，并且似乎不适用于最新版本的 MUI。

我需要在 div 上应用触摸波纹效果，但我无法使用按钮或元素，ButtonBase因为其中还有另一个按钮。

预先感谢您的回复。

我希望在单击“登录”按钮时显示加载微调器

下图显示了这一点

目前我正在尝试

    <Fragment>
      {isLoading == true ? <CircularProgress /> : <div></div>}
      <Paper variant="outlined" className={classes.root}>
        <Box px={3} py={2}>
          <Typography variant="h6" align="center" margin="dense">
            Login
          </Typography>
          <Typography variant="inherit" color="textSecondary">
            {errors.non_field_errors?.message}
          </Typography>
          <Grid container spacing={1}>
            <Grid item xs={12} sm={12}>
              <TextField
                required
                label="Email"
                fullWidth
                margin="dense"
              />
              <Typography variant="inherit" color="textSecondary">
                {errors.email?.message}
              </Typography>
            </Grid>
            <Grid item xs={12} sm={12}>
              <TextField
                required
                label="Password"
                type="password"
                fullWidth
                margin="dense"
              />
              <Typography variant="inherit" color="textSecondary">
                {errors.password?.message}
              </Typography>
            </Grid>
          </Grid>

          <Box mt={3}>
            <Button
              variant="contained"
              color="primary"
              onClick={handleSubmit(onSubmit)}
            >
              Login
            </Button>
          </Box>
        </Box>
      </Paper>
    </Fragment>

我得到的是

我想在DatePickerfrom @mui/lab(5.0.0-alpha.55) 中添加一个“清除”按钮。

我正在尝试什么：

• 在 state 中存储一个date字段，作为valueprop 传递给DatePicker
• 当需要“清除”值和输入时将其更改date为null

我观察到的行为：

• 如果date有效，则按预期工作，并且输入被清除
• 如果date无效，则error清除，但无效日期仍保留在输入中。

我尝试过的显示上述行为的基本版本可以在此处看到。

如果您输入了部分日期，然后单击clear，您可以观察到输入的内容没有被清除。

我宁愿避免涉及更改 的解决方案key，因为这会带来其他问题，例如不尊重将 更改为 的外部源date，null以及label在清除输入时需要额外的技巧来尊重转换。

我正在尝试使用sx MUI 属性设置组件的样式。

<Typography
        variant='h1'
        align='center'
        sx={{ fontSize: '24px', pb: '8px', fontWeight: '700' }}
    >
        Admin Panel
</Typography>

问题是：MUI 主题中的类具有更多 CSS 特异性，并覆盖sx prop 中的类。

以下是用于排版的 MUI 主题设置：

typography: {
        h1: {
            fontSize: '2rem',
            '@media screen and (min-width: 768px)': {
                fontSize: '3rem',
            },
            '@media screen and (min-width: 1024px)': {
                fontSize: '3.5rem',
            },
        },
    },

这也是它在开发工具中的外观：

这是预期的行为吗？我有什么办法可以解决这个问题吗？

我如何像其他谷歌应用程序一样实现单色图标，以便它与 Material You 选择的动态颜色相匹配？

我们可以用更少的代码更改material-ui组件的字体系列.我尝试了很多方法,但我仍然无法做到.我必须单独更改字体系列,这真的是很多工作.有没有其他方法可以做到这一点？

我添加了css悬停属性来禁用按钮的悬停效果,但它似乎对我的情况不起作用,我该如何解决这个问题？

import Button from 'material-ui/Button'
import styled from 'styled-components'

const StyledButton = styled(Button)`
  &:hover {
    background: none;
  }
`
export const SubmitButton = ({ onClick }) => {
  return (
    <StyledButton
      variant="raised"
      onClick={onClick}>
      login
    </StyledButton>
  )
}