标签: material-ui

我已经安装了 material-ui/lab 以便用户使用警报组件，但是每当我导入它时：import Alert from '@material-ui/lab/Alert';它无法编译并抛出此错误：

./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js
Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'.

所以我试着用谷歌搜索这个问题，发现了另一个关于material-ui/lab/AutoComplete组件的问题（这个问题正是这个问题），接受的答案是将 material-ui/core 更新到版本 4.9.9，看起来它对问这个问题的人有用，但遗憾的是不适合我，我有所有已安装的 material-ui 东西的这个版本：

    "@material-ui/core": "^4.9.9",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.48",

所以现在我问你们是否有另一种方法可以解决这个问题，谢谢

由于某种原因，我无法调用 useStyles，因为它会出错：

This expression is not callable.
  Type 'never' has no call signatures.ts(2349)
const useStyles: never

这是完整的代码：

import { makeStyles, Theme } from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import { ReactComponent as HeaderLogo } from "../../images/logo.svg";

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    backgroundColor: theme.palette.VampirismBlack.main,
  }
}));

const Header = (): JSX.Element => {
  const classes = useStyles();

  return (
    <AppBar position="static">
      <Toolbar variant="dense">
        <HeaderLogo width="125" height="75" />
        <IconButton>
          Home …

我有一个使用ES6模块的Meteor/React项目.我已经使用npm安装了materialize-css,但我不确定如何在我的JSX代码中实际使用Materialize类.我应该从materialize-css导入什么？或者我只需要将CSS包含在我的主index.html文件中？

我主要想要它用于网格系统,因为我将使用material-ui作为实际的UI组件.

在尝试找到一个示例,其中FloatingActionButton浮动在其标准的右下方屏幕位置没有结果,我来找你,如果你可以提供一个,因为它似乎是一个普通的按钮,没有任何智能浮动到该角落默认情况下.

它是否应该通过设置自定义css规则使其浮动？Material-UI文档未提及有关浮动Material-UI FloatingActionButton文档的任何属性.

我正在努力为<Link/>我的材料添加组件-ui AppBar

这是我的导航类:

class Navigation extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    var styles = {
      appBar: {
        flexWrap: 'wrap'
      },
      tabs: {
        width: '100%'
      }
    }

    return (
      <AppBar showMenuIconButton={false} style={styles.appBar}>
        <Tabs style={styles.tabs}>
          <Tab label='Most popular ideas'/>
          <Tab label='Latest ideas' />
          <Tab label='My ideas' />
        </Tabs>
      </AppBar>
    )
  }
}

看起来没问题:

标签是可点击的,有流畅的动画,这很酷.但是如何将它们react-router和它的<Link/>组件连接在一起？

我试过添加这样的onChange监听器:

<Tab
  label='My ideas'
  onChange={<Link to='/myPath'></Link>}
/>

但是我收到以下错误:

Uncaught Invariant Violation: Expected onChange listener to be a …

我在我的React应用程序中使用react-router v4和material-ui.我想知道如果GridTile在GridList中点击一下,如何更改URL .

我最初的想法是使用处理程序onTouchTap.但是,我可以看到重定向的唯一方法是使用组件Redirect或Link.如何在不渲染这两个组件的情况下更改URL？

我试过this.context.router.push('/foo')但它似乎没有用.

我想textfield在用户按键盘输入键时传递值.在onChange()事件中,我得到的值textbox,但如何在enter按下键时获得此值？

码:

import TextField from 'material-ui/TextField';

class CartridgeShell extends Component {

   constructor(props) {
      super(props);
      this.state = {value:''}
      this.handleChange = this.handleChange.bind(this);
   }

   handleChange(e) {
      this.setState({ value: e.target.value });
   }

   render(){
      return(
         <TextField 
             hintText="First Name" 
             floatingLabelText="First Name*"
             value={this.state.value} 
             onChange={this.handleChange} 
             fullWidth={true} />
      )
   }
}

我有一个 MaterialUI Select 代码，我正在动态处理 value 参数。我的问题是，当我设置任何值时，它总是说它超出范围，甚至显示有效值中的值。

SelectInput.js:291 Material-UI: you have provided an out-of-range value `100001,250000` for the select (name="followers") component.
Consider providing a value that matches one of the available options or ''.
The available values are `0,50000`, `50001,100000`, `100001,250000`, `250001,500000`, `500001,750000`, `750001,9007199254740991`.
(anonymous) @ SelectInput.js:291

这是我的代码简化：

const followers = [
  { '0-50k': [0, 50000] },
  { '50k-100k': [50001, 100000] },
  { '100k-250k': [100001, 250000] },
  { '250k-500k': [250001, 500000] },
  { '500k-750k': [500001, 750000] },
  { '+1M': [750001, Number.MAX_SAFE_INTEGER] …

我想使用 MUI 中的日期选择器，但收到此错误，并且我不知道到底出了什么问题。这是我的代码：

import TextField from "@mui/material/TextField";
import DatePicker from "@mui/lab/DatePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";

const ExpenseForm = () => {
  return (
    <Box component="form" noValidate autoComplete="off">
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker
          label="Basic example"
          onChange={(newValue) => {}}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    </Box>
  );
};

export default ExpenseForm;

和我的 package.json：

"dependencies": {
    "@date-io/date-fns": "^2.13.1",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.3.1",
    "@mui/lab": "^5.0.0-alpha.68",
    "@mui/material": "^5.4.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0", …

我在 .tsx 文件中使用 Typescript 和 Material-ui 编写 ReactJS 类。在我的自定义组件之一中，我想创建对我在自定义组件中使用的组件之一的引用。

export class MyTextField extends React.Component<MyProps, MyState> {
  private refTextField: React.RefObject<TextField>;
  constructor(props: MyProps) {
    super(props);
    this.refTextField = React.createRef();
  }

  render(): JSX.Element {
    const { id, label, value: defaultValue } = this.props;
    const { value } = this.state;
    const element = (
      <TextField ref={this.refTextField} id={id} label={label} defaultValue={defaultValue} value={value} />
    );

    return element;
  }
}

在编译期间，我在引用的声明中收到错误消息：

'TextField' 指的是一个值，但在这里被用作一种类型。TS2749

我试图将“typeof TextField”放在我的声明中，但在我的渲染中评估 ref 属性时，我有另一条消息：

类型 'RefObject<(props: TextFieldProps) => Element>' 不能分配给类型 '((instance: HTMLDivElement | null) => void) …