小编Rya*_*ell的帖子

我已经学会了使用 @keyframe 在 css 中使用动画。然而，我想将我的自定义动画代码写入我的反应项目（使用 materialUI）。我的挑战是如何使用 MaterialUI 中的 makeStyle() 编写 javascript 代码来自定义我的动画。这次我希望能够在 materialUI 中以百分比形式自定义转换过程。我需要能够在 makeStyle() 中编写这样的代码，但我似乎不知道该怎么做。

@keyframes myEffect {
 0%{
  opacity:0;
  transform: translateY(-200%); 
 }

100% {
  opacity:1;
  transform: translateY(0);
 }
}

我正在使用 Material-UI，但我有点困惑。有组件，Typography但我无法真正理解何时使用它以及它的目的是什么。

应该Typography什么时候使用？它解决/帮助什么问题，或者如果我在开发时使用它会有什么好处？

一个例子对我更好地理解它非常有用。

在Material-UI 中，有一个makeStyles函数可以用来获取自定义的 CSS-Styling。

如果我不在该特定 CSS 中使用主题，我应该使用它吗？

例如：

import React from "react";
import { TextField, Paper, Button, Box } from "@material-ui/core";

const classes = {
  paper: {
      backgroundColor: "#eee",
      marginLeft: "30%",
       marginRight: "30%"
  },
  textField: {
      backgroundColor: "#fff"
  },
  button: {
      backgroundColor: "green",
      marginLeft: 20
  }
};

const Ohne = () => {
  console.log(classes);
  return (
      <Paper style={classes.paper}>
      <Box>
          <TextField style={classes.textField} />
          <Button style={classes.button}>abc</Button>
      </Box>
      </Paper>
  );
};

export default Ohne;

对象是：

{
    "paper": {
        "backgroundColor": "#eee", …

默认情况下，材料UI主题是几个预先定义的对象，例如的组合typography: {...}，palette: {...}等等。

是否可以将自定义对象添加到此设置中并仍然使用createMuiTheme？

例如，主题对象将变为：

const theme = {
  palette: {
    primary: '#000'
  },
  typography: {
    body1: {
      fontFamily: 'Comic Sans'
    }
  },
  custom: {
    myOwnComponent: {
      margin: '10px 10px'
    }
  }
}

我需要为我的徽章组件添加自定义颜色，但它似乎不起作用

我试过这些

<Badge className="badge" badgeStyle={{backgroundColor: '#00AFD7'}} variant="dot" />

<Badge className="badge" color='#00AFD7' variant="dot" />

这些都行不通。如何将自定义颜色传递给我的徽章组件

在SliderThemeData trackheight给出，但我想增加轨道的宽度。

这是我当前的代码：

SliderTheme(
    data: SliderThemeData(
      trackHeight: 1,
    ),
    child: RangeSlider(
      min: 0.0, 
      max: 4.0,
      onChanged: _onChange,
      values: state.value,
      onChangeEnd: _onChangeEnd,
      inactiveColor: Colors.grey,
      activeColor: Theme.of(state.context).accentColor,
    ),
),

目前正在尝试在Formik 中使用 Material UI 的自动完成组件。到目前为止，诸如文本字段和 Material-UI 中的传统选择之类的东西在 Formik 中表现得非常好。实现自动完成并非如此。Formik 的 onChange 处理程序似乎没有更新我的city_id. 我知道 Autocomplete 仍然不是 Material-UI 的核心库的一部分，但目前仍在观察是否有可能发生这样的事情。

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form } from 'formik';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import Button from '@material-ui/core/Button';

import { cities } from '../data/cities';

import "./styles.css";

const initialValues = {
  city_id: '',
};

const submit = params => {
  alert(`Value for city_id is: ${params.city_id}`);
};

function App() {
  return ( …

数据存储为：

 { iso: "gb", label: "United Kingdom", country: "United Kingdom" },
 { iso: "fr", label: "France", country: "France" }

传递给自动完成的值是：

{ iso: "gb", label: "United Kingdom", country: "United Kingdom" }

控制台报错

Material-UI：提供给自动完成的值无效。没有一个选项与{"label":"United Kingdom","iso":"gb","country":"United Kingdom"}.

报告的类型错误 value={}

输入'字符串| ICountry' 不可分配给类型 'ICountry | ICountry[] | 空| 不明确的'。类型 'string' 不能分配给类型 'ICountry | ICountry[] | 空| 不明确的'。

问题：将数据传递给组件并未将其设置为相应的选项，我对如何解决此问题一无所知。

问题代码沙盒：https ://codesandbox.io/s/charming-firefly-zl3qd?file =/ src/App.tsx

import * as React from "react";
import { Box, Typography, TextField, Button } from "@material-ui/core";
import { Autocomplete } …

滚动或选择项目时，多选框弹出框不断跳跃

Codepen https://codesandbox.io/s/material-demo-e5j8h

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import ListItemText from "@material-ui/core/ListItemText";
import Select from "@material-ui/core/Select";
import Checkbox from "@material-ui/core/Checkbox";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
    maxWidth: 300
  },
  chips: {
    display: "flex",
    flexWrap: "wrap"
  },
  chip: {
    margin: 2
  },
  noLabel: {
    marginTop: theme.spacing(3)
  }
}));

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP …

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { orange } from '@material-ui/core/colors';

const useStyles = makeStyles(theme => ({
  root: {
    color: theme.status.danger,
    '&$checked': {
      color: theme.status.danger,
    },
  },
  checked: {},
}));

function CustomCheckbox() {
  const classes = useStyles();

  return (
    <Checkbox
      defaultChecked
      classes={{
        root: classes.root,
        checked: classes.checked,
      }}
    />
  );
}

const theme = createMuiTheme({
  status: {
    danger: orange[500],
  },
});

export default function CustomStyles() {
  return (
    <ThemeProvider theme={theme}> …