标签: material-ui

我正在使用 npm package material-datatable serverSide true 因为所有操作发生（搜索、排序、过滤...）将导致从服务器获取数据。

一切都很好，但内置搜索。我想禁用内置搜索功能，因为当表搜索事件触发时，它已经从服务器获取了搜索到的数据，并且表应该只显示它​​（我不想再次对此数据进行任何本地搜索）。但是经过一段时间的研究，我仍然找不到禁用内置搜索的方法。

有知道的请解释一下，谢谢。

我正在尝试将 Material-UI 面包屑与 react-router 一起使用。如何以编程方式检测当前路线。

在 Material-UI 网站上有一个关于如何使用它的示例，但它需要使用静态面包屑名称映射。我已经尝试使用 HOC“withRouter”拆分路径名，但它不起作用。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Breadcrumbs, Link, Paper, Typography} from "@material-ui/core";

import { withRouter } from "react-router-dom";

import { useTranslation } from "../Translate";

const useStyles = makeStyles(theme => ({
    root: {
        justifyContent: "center",
        flexWrap: "wrap",
    },
    paper: {
        padding: theme.spacing(1, 2),
    },
}));

const breadcrumbNameMap = {
    "/inbox": "Inbox",
    "/inbox/important": "Important",
    "/trash": "Trash",
    "/spam": "Spam",
    "/drafts": "Drafts",
};

function SimpleBreadcrumbs(props) {
    const classes = …

我正在尝试使用 3 张具有相同高度的水平卡片，并且它必须具有响应性。那么问题来了，如果一张卡片的内容比另一张大，那么卡片的高度就不一样了，一张卡片的高度看起来比另一张大。所以我一般想要这3张卡片的高度固定，这样无论内容是少还是多，3张卡片的高度都必须相同。

我在此使用“Material-UI”并使用其中的 Card 组件。

<Grid container spacing={2}>
 <Grid item>
   <Card>
     Card 1
   </Card>
 </Grid>
<Grid item>
   <Card>
     Card 2
   </Card>
 </Grid>
<Grid item>
   <Card>
     Card 3
   </Card>
 </Grid>
</Grid>

如果我尝试使用 Grid 的组件作为“卡片”，那么它可以正常工作，所有卡片的高度都是恒定的，无论它们里面是否存在内容。但是我无法提供卡之间的间距，因此结构看起来非常紧凑。

<Grid container spacing={2}>
 <Grid item component="Card">
     Card 1
 </Grid>
<Grid item component="Card">
     Card 2
 </Grid>
<Grid item component="Card">
     Card 3
 </Grid>
</Grid>

我试图将一个按钮嵌套到另一个按钮中（IconButton里面ListItem有button道具）。问题是，ListItem即使我点击IconButton. 我希望它仅在我直接单击ListItem元素时触发

我尝试了 的绝对定位IconButton，但没有帮助

看例子

我尝试从@material-ui/core@3.9.3material 的最新版本切换到当前版本v4.4.3，但出现此错误

我不清楚这个问题发生在哪个代码片段以及如何解决它。也许有人对此有一些想法？此外，您可以在 package.json 文件中检查我的所有依赖项。如果不清楚，请告诉我您需要哪些信息，我会附上。

"dependencies": {
    "@babel/runtime": "7.1.5",
    "@date-io/date-fns": "0.0.2",
    "@material-ui/core": "4.4.3",
    "@material-ui/icons": "3.0.1",
    "@material-ui/pickers": "3.2.6",
    "axios": "0.19.0",
    "classnames": "2.2.6",
    "compression-webpack-plugin": "3.0.0",
    "connected-react-router": "6.4.0",
    "date-fns": "2.0.0-alpha.27",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.14.0",
    "history": "4.6.3",
    "humps": "2.0.0",
    "jss": "^10.0.0",
    "jss-camel-case": "6.1.0",
    "jss-default-unit": "8.0.2",
    "jss-expand": "5.3.0",
    "jss-extend": "6.2.0",
    "jss-global": "3.0.0",
    "jss-nested": "6.0.1",
    "jss-props-sort": "6.0.0",
    "jss-vendor-prefixer": "8.0.1",
    "lodash": "4.17.14",
    "moment": "2.23.0",
    "normalizr": "3.3.0",
    "prop-types": "15.6.2",
    "qs": "6.5.2",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-dropzone": "10.1.4",
    "react-hot-loader": "4.8.8",
    "react-image": "2.1.1",
    "react-intl": "2.7.2",
    "react-intl-po": …

我已经使用了很多 Material UI，所以这令人困惑。我查看了文档，检查了代码，但看不到问题。我希望嵌套组件中的 H2 标记使用 Arial。但是，它使用 Times 进行渲染。我不知道为什么。

这是我的 index.tsx：

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import configureStore from "./redux/stores/main";
import * as serviceWorker from "./serviceWorker";
import { createMuiTheme } from "@material-ui/core";
import myTheme from "./styling/mainTheme";
import { ThemeProvider } from "@material-ui/styles";

const theme = createMuiTheme({
  typography: {
    fontFamily: ["Arial"].join(",")
  }
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Provider store={configureStore()}>
      <App />
    </Provider>
  </ThemeProvider>,
  document.getElementById("root")
);

serviceWorker.unregister();

我的应用程序组件：

import React from …

即我想使用这个 Material-UI 示例作为类组件。如何？

import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

它引发了很多错误，所以我删除了“const”，但仍然遇到很多问题。

我在 ExpansionPanel(material-ui 的一个组件) 中使用了 react-select ，它使 ExpansionPanel 成为不需要的滚动。我该如何解决？我试图改变 z-index ，但没有奏效。考虑图片中的第三个选择，它的下拉菜单被 ExpansionPanel 隐藏了。先感谢您。

                <Select
                   value={state.selectedPerson}
                   onChange={handleMitarbeiterChange}
                   options={state.peopleOptions}
                   textFieldProps={{
                   label: 'Mitarbeiter',
                   id: "mitarbeiter-required",
                   InputLabelProps: {
                     shrink: true,
                   },
                 }}
                />

我刚刚升级了包@material-ui/core*(4.4.1 => 4.8.3)* & @material/styles*(4.4.1 = 4.8.2)*

现在使用主题的所有内容都没有应用正确的颜色和边距。

主题包中是否有任何我不知道的重大更改？

我正在使用 Next.js 进行服务器渲染。重要说明：在升级包之前一切正常。降级不是一种选择，因为我需要访问较新版本中发布的组件之一。此外，我不想因此将自己锁定在较低版本上。

编辑：代码清晰

_app.js

<Provider store={store}>
  <PersistGate persistor={store.__PERSISTOR} loading={null}>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} user={this.state.user} />
    </ThemeProvider>
  </PersistGate>
</Provider>

_document.js

 ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />)
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      <React.Fragment key="styles">
        {initialProps.styles}
        {sheets.getStyleElement()}
      </React.Fragment>
    ]
  };

这一切都非常类似于 Material-UI 提供的示例。我没有看到他们的 git repo …

我想在 Material-UI 中设置自定义主题规则。我想制作明暗主题并使用一些常见设置对其进行扩展。

我认为将明暗主题的通用设置放在一个单独的变量中，然后将它们合并在一起是个好主意。

但是我遇到了用默认值覆盖自定义设置的问题。默认情况下，commonSettings具有所有类型的设置，即使我没有定义它们。通过合并，默认设置只需覆盖自定义设置。所以，也许有人已经遇到过这种情况，并且知道如何将两个设置数组合并为一个。

简单的例子：

const commonSettings= createMuiTheme({
    breakpoints: {...},
    direction: 'ltr',
    typography: {...},
});

const lightThemeSettings = createMuiTheme({
    palette: {...},
});

const darkThemeSettings = createMuiTheme({
    palette: {...},
});

// Merge together
const lightTheme = { ...commonSettings, ...lightThemeSettings };
const darkTheme = { ...commonSettings, ...darkThemeSettings };

export default { lightTheme, darkTheme };