标签: material-ui

我正在使用 Material ui 按钮。此按钮应将图像和按钮名称作为其子项。我不想用作我的 Button 的孩子之一，但我想通过将 startIcon 道具传递给 Button 来实现。按钮应如下所示：-

我试过这个：-

<Button className={classes.navButtons} startIcon={ZapierIcon}>
    Zapier
</Button>

但它在按钮中显示了我的图像路径而不是实际图像....任何人都可以提出一些建议我做错了什么。

刚接触 REACT，请耐心等待：

每当我使用带有Formik 的material-ui-phone-number插件提交表单时，我都会不断获得 phoneNumber 的初始值。这是我的代码示例。

const initialValues = {
     phoneNumber: "",
  };

const BasicExample = () => (
    <Formik
      initialValues={initialValues}>
      {() => (
        <Form>
          <Field
                variant="outlined"
                label="Phone Number"
                name="phoneNumber"
                type="tel"
                fullWidth
                size="small"
                defaultCountry={"gh"}
                as={MuiPhoneNumber}
              />
        </Form>
      )}
    </Formik>

我是一个使用 react 的新手，为我的项目使用了材料表

但是字体大小是我喜欢的小，图片附在下面 我想增加表格的字体大小。

这是代码

state = {
      columns: [
        { title: "ID", field: "id", type: "numeric" },
        { title: "Title", field: "title" },
        { title: "Active", field: "active", type: "boolean" },
        { title: "# Questions", field: "number_of_questions" }
      ],
      data: [
        { id: 1, title: "First Survey", active: true, number_of_questions: 9 },
        { id: 2, title: "Second Survey", active: false, number_of_questions: 8 }
      ]
    };
render() {
    return (
      <div className="example-box-wrapper">
        <div className="adjust example-box-wrapper">
          <div id="dynamic-table-example-1_wrapper">
            <MaterialTable
              title="All …

材料界面：v4.8.2
反应：v16.12.0

babel-plugin-react-css-modules 和 rtl 应用程序 - 我想使用 injectFirst 但后来我收到警告： Material-UI: you cannot use the jss and injectFirst props at the same time.

我的猜测是我应该对 jss 进行不同的定义，以便它支持 rtl 和 css 模块。

// Configure JSS - How should I add here the css-modules styles?
const jss = create({ plugins: [...jssPreset().plugins, rtl()] }); 

对于 rtl 我应该这样做：

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

<StylesProvider jss={jss}>
            <ThemeProvider theme={theme}>
                <AppContainer />
            </ThemeProvider>);
        </StylesProvider>

对于 css-modules 样式，我应该这样做：

<StylesProvider injectFirst>
            <ThemeProvider theme={theme}>
                <AppContainer …

    import React from 'react';
    import MaterialTable from 'material-table';

    export default class DictionaryTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        columns: [
            {title:'Need state',field: 'NeedState',lookup: { 1: 'Fragrance', 2: 'Price', 3:'Formulation',4:'Technolgy'} },
            { title: 'Keyword extracted', field: 'keyword' },
            { title: 'Actual Keyword', field: 'actual_keyword' },
            { title: 'Map score', field: 'map_score', type: 'numeric' },
            { title: '6 month mentions', field: 'six_month_mention'},
        ],
        data: [
            { NeedState: 1, keyword: 'mango', actual_keyword: 'apple', map_score: .3 ,six_month_mention:234},
            { NeedState: 2, keyword: …

Material UI 有一组很好的内置媒体查询：https : //material-ui.com/customization/breakpoints/#css-media-queries

Material UI 还允许我们将 Styled-Components 与 Material UI 一起使用：https : //material-ui.com/guides/interoperability/#styled-components

我想知道如何将两者结合在一起。也就是说，如何使用样式化组件和 Material-UI 的内置断点进行媒体查询？

谢谢。

更新：

这是我正在尝试做的一个例子：

import React, { useState } from 'react'
import styled from 'styled-components'


import {
  AppBar as MuiAppBar,
  Drawer as MuiDrawer,
  Toolbar,
} from '@material-ui/core'


const drawerWidth = 240

const AdminLayout = ({ children }) => {

  return (
    <BaseLayout>
      <AppBar position="static">
        <Toolbar>
          TOOLBAR
        </Toolbar>
      </AppBar>
      <Drawer>
        DRAWER
      </Drawer>
      {children}
    </BaseLayout>
  )
}

AdminLayout.propTypes = {
  children: PropTypes.node.isRequired,
} …

我目前的代码如下：

import {
  Button,
  Grid,
  Typography,
  } from '@material-ui/core';

import EditOutlinedIcon from '@material-ui/icons/EditOutlined';

<Grid item>
     <Button
        variant="outlined"
        className={classes.button}
        onClick={toggleState('showEdit')}
        startIcon={<EditOutlinedIcon />}
     >
     Edit
     </Button>
</Grid>

如何分配自定义图标startIcon而不是使用EditOutlinedIconmaterial-ui 附带的图标？

更新：

当尝试使用下面的@Peter Ambruzs 的答案（使用内联 svg）时，它可以工作，但是当我通过将代码链接到存储在 src/assets 文件夹中的图标来尝试相同的操作时，只有文件路径显示在按钮上，如下所示：

我的代码：

import {
  EditIcon,
} from '../../../assets/icons';

 <Grid item>
            <Button variant="outlined" startIcon={EditIcon}>
                   custom
            </Button>
 </Grid>

我的图标在这里：

index.js 文件：

export { default as EditIcon } from './edit.svg';

编辑.svg 文件：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: …

Material UI Pickers 中显示的日期比所选日期晚 1 天：

我选择了 25th，formik 中的值为 25th，但表单上显示的值为 24th。

  "@date-io/date-fns": "^1.3.13",
  "date-fns": "^2.9.0",

import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, DatePicker } from '@material-ui/pickers';
import { format, addDays } from 'date-fns';

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <FastField
       as={DatePicker}
       variant="inline"
       disableToolbar
       name="startTime"
       format="PPP"
       onChange={date => {
         console.log(format(date, 'yyyy-MM-dd'));
         setFieldValue('startTime', format(date, 'yyyy-MM-dd'));
       }}
       value={values.startTime}
   />
</MuiPickersUtilsProvider>

我一直在尝试使用 Material-UI ThemeProvider 将主题应用于我的 React 应用程序，但遇到了一些奇怪的行为。

我有两个主题：白天模式和夜间模式。应用启动时默认为夜间模式，用户可以通过复选框切换主题。

主题从夜间模式正常切换到白天模式，但不会切换回来。

这是示例应用程序，重现此行为：https :
//codesandbox.io/s/eloquent-ives-k1np1

我究竟做错了什么？

我正在使用材料表（https://material-table.com/）。

我的问题是我想更改表格边框半径和表格阴影，显然，使用“选项功能”不存在此选项

但是当我检查表格时，我可以修改半径和阴影，如下所示：

我想知道如何从 Reactjs 覆盖这些值：

const useStyles = makeStyles(theme => ({
  root: {
  }
}));


const MainTable = props => {
  const {className, params, ...rest} = props

(...)
  return (
    <MaterialTable
      className={classes.MuiPaperRounded}
      columns={[
        {title: 'Equipement', field: 'equipement'},
        {title: 'TAG', field: 'tag'},
        {title: 'Nombre de points de mesures', field: 'nombreDePointsDeMesures'},
        {title: 'Mesuré', field: 'mesure', type: 'boolean'}
      ]}
      data={rows}
      icons={(...)}
      options={{
        tableLayout: {backgroundColor: 'green'},
      }}
      title="Routine vibration"
    />
  );
};