标签: material-ui

嘿，我想弄清楚如何在我自己的应用程序中调用 SampleMessageDialog。

到目前为止，这是我表单上应该打开消息框的按钮的代码：

Private Async Sub BrowseButton_Copy_Click(sender As Object, e As RoutedEventArgs) Handles BrowseButton_Copy.Click
    msgBoxPop.showPop()
End Sub

这是showPop：

Imports MaterialDesignThemes.Wpf
Imports newRegisterProg.MaterialDesignColors.WpfExample.Domain

Public Class msgBoxPop
    Public Shared Async Sub showPop()
        Dim sampleMessageDialog = New SampleMessageDialog()

        With sampleMessageDialog
            .Message.Text = "TEST!"
        End With

        Await DialogHost.Show(sampleMessageDialog, "RootDialog")
    End Sub
End Class

最后这是用户控件：

<UserControl x:Class="MaterialDesignColors.WpfExample.Domain.SampleMessageDialog"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d" 
             x:Name="messagePOP"
             d:DesignHeight="300" d:DesignWidth="300"
             MaxWidth="400">
    <Grid Margin="16">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock x:Name="Message" 
                   Margin="0 6 0 0"
                   FontSize="18" Grid.Row="0"/> …

我正在动态生成菜单，图标名称是可能的配置之一：但是如何动态调用图标而不显式导入它？

let { name, icon } = menuEntry;
<ListItem primaryText={name} leftIcon={what here?} />

我已经能够通过传递自定义 muiTheme 属性来自定义 Material-UI 的许多颜色和间距相关属性，但似乎没有与任何特定状态下按钮的文本颜色相对应的调色板元素。

在本例中，我为 muiTheme 使用 #4275c7 的 Primary1Color - 并且主按钮文本显示为黑色。考虑到这种原色，白色文本看起来会更好并且更容易阅读。

我已经尝试过设置palette.primaryColor/primaryTextColor、button.primaryTextColor和raisedButton.textColor/primaryColor/primaryTextColor。它们都没有驱动按钮文本着色。我是否缺少一个明显的属性，或者是否需要不同类型的配置？

作为参考，这是我当前的 muiTheme 声明：

export const muiTheme = getMuiTheme({
  fontFamily: 'Roboto, sans-serif',
  borderRadius: 2,
  spacing: {
    iconSize: 24,
    desktopGutter: 24,
    desktopGutterMore: 32,
    desktopGutterLess: 16,
    desktopGutterMini: 8,
    desktopKeylineIncrement: 64,
    desktopDropDownMenuItemHeight: 32,
    desktopDropDownMenuFontSize: 15,
    desktopDrawerMenuItemHeight: 48,
    desktopSubheaderHeight: 48,
    desktopToolbarHeight: 56
  },
  palette: {
    primary1Color: '#4275c7',
    primaryTextColor: MaterialColors.white,
    primaryColor: MaterialColors.white,
    primary2Color: MaterialColors.cyan700,
    primary3Color: MaterialColors.grey400,
    accent1Color: MaterialColors.pinkA200,
    accent2Color: MaterialColors.grey100,
    accent3Color: MaterialColors.grey500,
    textColor: MaterialColors.darkBlack,
    secondaryTextColor: (0, MaterialColorManipulator.fade)(MaterialColors.darkBlack, 0.54),
    alternateTextColor: MaterialColors.white,
    canvasColor: MaterialColors.white, …

辅助功能问题：<label>...</label>除了 a 之外，a 还可以有孩子<input ... />吗？我们在一个项目中使用 Material UI，其<Switch />组件的构建方式如下：

<label>
  <div>
    <span>
      <span>
        <input />
      </span>
    </span>
  </div>
</label>

这会在 HTML_Codesniffer 中触发可访问性错误。

不确定它是否只是不习惯此结构并期望它label是其直接父级input，或者它是否是一个实际错误。

我在测试项目中使用 Material UI 中的 v1.0.0-beta.24，“下拉”菜单的工作方式与以前的版本不同，所以我想要做的是在 Select 组件中设置像占位符一样。

在我之前的 versi\xc3\xb3n 示例中，我有以下内容：

<DropDownMenu\n  value={this.state.DivisionState}\n  onChange={this.handleChangeDivision}>\n  <MenuItem value={\'\'} primaryText={\'Select division\'} />\n  {this.renderDivisionOptions()}\n</DropDownMenu>\n

所以在新版本中不支持primaryText属性，这是我的代码：

import React from \'react\';\nimport Select from \'material-ui/Select\';\nimport {MenuItem, MenuIcon} from \'material-ui/Menu\';\nimport {DatePicker} from \'material-ui-pickers\';\nimport { FormControl } from \'material-ui/Form\';\nimport { InputLabel } from \'material-ui/Input\';\n\n\nimport cr from \'../styles/general.css\';\n\nexport default class Example extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n\n      DivisionData: [],\n      DivisionState: \'\',\n\n    };\n    this.renderDivisionOptions = this.renderDivisionOptions.bind(this);\n    this.handleChangeDivision = this.handleChangeDivision.bind(this);\n\n  }\n  componentDidMount() {\n    const divisionWS = …

当用户单击浏览器后退按钮时，我试图观察 React Router 状态的变化。我的应用程序集成了 redux Provider 和 Material-UI。但是我无法开始getUserConfirmation工作。

请在下面找到我的代码片段。

 const getConfirmation = (message, callback) => {
      const allowTransition = window.confirm(message)
      strong textcallback(allowTransition)
    }
    const myHistory = createBrowserHistory();

    ReactDOM.render(
      <Provider store={store} >
        <MuiThemeProvider>
           <BrowserRouter basename="/app" history={myHistory} getUserConfirmation={getConfirmation} >
              <App />
           </BrowserRouter>
        </MuiThemeProvider>
      </Provider>, document.getElementById('root'));

使用的库版本：

React v16
react-router-dom v4.2.2
react-redux v5.0.6
material-ui v0.20.0
redux v3.7.2

我提到的一些文档：

https://reacttraining.com/react-router/web/api/BrowserRouter
https://codepen.io/pshrmn/pen/MpOpEY
https://codepen.io/anon/pen/gRXzMg?editors=0010

感谢您的帮助，谢谢

早上好，

我爱上了 MUI，可以做的事情太多了。但是，在广泛使用它之后，我注意到当 MUI Divider 是 Container 或 Paper 组件的子级时，它不会出现。我找不到任何关于为什么会这样的信息，所以这可能是我的实现。有人可以检查一下，看看为什么它没有出现吗？

一切都是进口的，Popover 工作正常。

谢谢！

navBarPopover: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center"
}

<Popover 
    id={id}
    open={open}
    anchorEl={anchorEl}
    onClose={handleClose}
    anchorOrigin={{
        vertical: "top",
        horizontal: "right",
    }}
    transformOrigin={{
        vertical: "top",
        horizontal: "right",
    }}
>
  <Container className={clsx(classes.navBarPopover)}>
      <Button className={clsx(classes.loginButton)} component={Link} to="/user_auth" onClick={() => handleClose()}>
          Login
      </Button>
      <Divider />
      <Button className={clsx(classes.loginButton)} component={Link} to="/faqs" onClick={() => handleClose()}>
          FAQs
      </Button>
  </Container>
</Popover>

请检查代码和框：https ://codesandbox.io/s/bold-hamilton-k1nzs

在我运行代码的那一刻，我得到了一个无限循环，您可以检查控制台以查看条目如何呈指数增长。最终网站崩溃了。

我有一个像这样的状态变量：

const [checkbox, setCheckBox] = useState({});

然后我在 useEffect 中调用一个函数：

useEffect(() => {
    createCheckbox();
  });

这是 createCheckbox 函数：

const createCheckbox = () => {
    let checkboxObj = {};
    rows.forEach((e) => {
      checkboxObj[e.id] = false;
    });
    setCheckBox(checkboxObj);
  };

我在第 76 行有一个 console.log 来展示问题。它是 console.log(checkbox)

知道发生了什么吗？

我正在使用material-table. 在TablePagination不工作。它在控制台中引发错误。

我尝试按照文档安装软件包。

https://material-table.com/#/docs/install

npm install material-table --save
npm install @material-ui/core --save

我得到这个错误：

Material-UI：caption提供给 classes 道具的键未在 ForwardRef(TablePagination) 中实现。您只能覆盖以下其中一项：root,toolbar,spacer,selectLabel,selectRoot,select,selectIcon,input,menuItem,displayedRows,actions。

警告：失败的道具类型：道具onPageChange在 中标记为必需ForwardRef(TablePagination)，但其值为 undefined。

警告：未知的事件处理程序属性onChangePage。它将被忽略。

警告：未知的事件处理程序属性onChangeRowsPerPage。它将被忽略。

版本：

"@material-ui/core": "^5.0.0-alpha.24",
"material-table": "^1.69.2",

如果我尝试分页，它会在控制台中引发错误。

未捕获的类型错误：_this.props.onChangePage 不是函数

示例代码：

 <MaterialTable
  icons={tableIcons}
  columns={columns}
  data={editable}
  title="Orders"
  localization={{
    toolbar: {
      searchPlaceholder: 'Filter',
      searchTooltip: 'filters the given text'
    },
    header: {
      actions: 'Actions'
    }
  }}
  actions={[
    {
      icon: 'save',
      tooltip: 'Save User',
      onClick: (event, rowData) => …

我正在尝试显示所有列的数据网格应该采用相等的宽度以适合父组件。但是最后有一个空白空间，我无法删除它，也无法使列采用自动宽度以适应页面宽度。

任何人都可以帮我解决这个问题吗

https://codesandbox.io/s/musing-montalcini-tn04y