标签: material-ui

我正在使用 Material UI 中的抽屉，并尝试使用 CSS 来圆角，如下所示：

  style={{
    borderRadius: "25px",
    backgroundColor: "red",
    overflow: "hidden",
    padding: "300px"
  }}

它有点工作，但实际的角保持白色而不是透明。

我怎样才能修复它，使角正确倒圆？我已将代码放入以下代码和框中：

https://codesandbox.io/s/material-demo-q3n14

我有这段代码为我的网格应用背景颜色，它一直工作到今天......它是黑色的，现在它变成白色，我无法更改根元素的背景颜色。

有没有任何代码可以覆盖这个？

我从这里得到了代码

https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js

const useStyles = makeStyles(theme => ({
  root: {
    height: '100%',
    width: '100%',
    backgroundColor: 'black'
  },

 <Grid container component='main' className={classes.root}>

// 完整代码

import React, { useState } from 'react';
import { connect } from 'react-redux';

import history from '../../../history';
import { requestSignIn } from '../../../store/actions';
// import { Button, Container, Row, Col, FormControl, Dropdown } from 'react-bootstrap'

import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox'; …

我有一个<input>标签type="number"，我想禁用键盘输入，以强制用户使用微调器（向上和向下箭头）更改值。我在每次更改时都会消耗输入值，因此我想这样做，这样我就不必实时验证用户输入，这似乎是唯一的选择。

除了普通的 html 和 javascript 之外，我还想知道如何在React和Material-ui中做到这一点。如果我有类似以下内容，如何阻止键盘输入？

  const [value, setValue] = useState(10);

  return (
    <React.Fragment>
      <TextField
        name="name"
        type="number"
        label="label"
        inputProps={{
          min: 0,
          max: 100,
          step: 2,
        }}
        defaultValue={value}
        onChange={(event) => {
          setValue(Number(event.target.value));
        }}
      />
    </React.Fragment>
  );

在许多 ReactJs 项目中，其中之一抛出以下错误：

Error: Material-UI: unsupported non-unitless line height with grid
alignment. Use unitless line heights instead.

在定义 lineHeight 时px，下面是我的代码：

const breakpoints = createBreakpoints({});

let theme = createMuiTheme({
     typography: {
        allVariants: {
            fontFamily
        },
        h1: {
            fontWeight: 600,
            fontSize: 26,
            lineHeight: '32px',
            [breakpoints.down("sm")]: {
                fontSize: 18,
                lineHeight: '26px',
            }
        },
        h2: {
            fontWeight: 600,
            fontSize: 20,
            lineHeight: 28 / 20
        },
        h3: {
            fontWeight: 600,
            fontSize: 16,
            lineHeight: '22px',
            [breakpoints.down("sm")]: {
                fontSize: 14,
                lineHeight: '20px',
            }
        }
    } …

集中、检查的课程似乎无法正常工作。我需要始终使用 !important 或使用material-ui 提供的jss 样式。例如：

https://codesandbox.io/s/css-modules-nvy8s?file=/src/CssModulesButton.js

CssModulesButton.module.css

.checkboxtest {
  color: blue;
}

.checkboxtestworking {
  color: blue !important;
}

CssModulesButton.js

import React from "react";
// webpack, parcel or else will inject the CSS into the page
import styles from "./CssModulesButton.module.css";
import Checkbox from "@material-ui/core/Checkbox/Checkbox";

export default function CssModulesButton() {
  return (
    <div>
      <Checkbox classes={{ checked: styles.checkboxtest }}>testasd</Checkbox>
      <Checkbox classes={{ checked: styles.checkboxtestworking }}>
        testasd
      </Checkbox>
    </div>
  );
}

索引.js

import React from "react";
import { render } from "react-dom";
import { StylesProvider …

在我的组件中，我需要覆盖 css 参数“overflow-y”。该参数在 .MuiDrawer-paper 类中描述。通常通过 makeStyles 来覆盖 css 是小菜一碟。但在这个组件中有两个div。父容器和子容器。当我设置重写的类时，例如：

 const useStyles = makeStyles((theme) => ({
      paper: {
        overflowY: 'unset',
      },
    )};

...

className={classes.paper}

父 div 得到这个类，它没有任何意义。因为我需要覆盖子类。我尝试做这样的事情：

 className={{ paper: classes.paper }}

但在这种情况下，班级不会被选...我该怎么办？

我希望在用户单击 TextField 之前不会显示错误消息。这是我的代码：

import React, { useState, useEffect }               from 'react';
import { TextField, Grid, Button }                  from '@material-ui/core';

const ReplyToComment = () => {

    const [replyContent, setReplyContent] = useState();
    const [errorMessage, setErrorMessage] = useState([]);

    useEffect(() => {
        if(replyContent) {
            if(replyContent.length > 7){
                setErrorMessage([]);
            } else {
                setErrorMessage(["Your answer is too short"])
            }
        } else {
            setErrorMessage(["answer field can not empty"])
        }
    }, [replyContent]);

    const handleChange = (event) => {
        setReplyContent(event.target.value)
    };
    
    const handleSubmit = async () => {
    console.log("************") …

我正在尝试设计我的卡片的样式，使其不那么大，但问题是每次我这样做时，我的 TextField 都会失去其功能，并且我必须继续单击 TextField，因为它不断失去焦点。我需要在不丢失 TextField 功能的情况下缩小 Card 组件的大小。

https://codesandbox.io/s/mutable-monad-dsvf8?file=/src/index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import TextField from "@material-ui/core/TextField";
import CreateIcon from "@material-ui/icons/Create";
import Box from "@material-ui/core/Box";
import CardMedia from "@material-ui/core/CardMedia";
import MuiAlert from "@material-ui/lab/Alert";
import Snackbar from "@material-ui/core/Snackbar";
import { withStyles } from "@material-ui/core/styles";

const PetitionCard = () => {
  const StyledCard = withStyles({
    root: { height: 450, width: 350 }
  })(Card); …

我tooltip想要react-select's 选择。我见过@atlaskit/tooltip完全像这样的工作，但我想使用材料 ui 工具提示，当我尝试时它不起作用。谁能帮我解决一下吗

import React, { Component } from "react";
import Select, { components } from "react-select";
import {primaryColor,primaryColorLight} from "../app-resources/theme-overrides/global"
import Tooltip from '@material-ui/core/Tooltip';

const { Option } = components;

const customOption = props => {
  return (
        <Tooltip title={props.label} arrow>
          <Option {...props} />
        </Tooltip>
  );
};

export default class SingleSelect extends Component {
  render(props) {
    return (
      <>
      <Select
        components={{
          Option: customOption,
          }}
        className="basic-single"
        classNamePrefix="select"
        name={this.props.name}
        isClearable
        options={this.props.Options}
        placeholder={this.props.placeholder}
        styles={{
          menu: …

我在我的 React 项目中使用材料表。我有 3 层数据树。这是第一个：

当我单击数据树表中第一层的 2 个项目中的第一个时，是否可以对其进行着色，以便更容易看到其下的值是子元素。像这样：

另外，如果我在向它传递数据时可以给它着色，我会更高兴。这是我传递数据的方式：

data={[
        {
          id: 1, // MAIN ELEMENT 
          name: "Parent",
          value: `Parent`,
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child",
          value: `Child`,
          parentId: 1,
        }]}

是否有一个选项可以在打开父元素之前对其进行着色，这样就可以清楚地看出它是父元素，而其他元素是子元素？

更新：

这是codesandbox 示例。正如您所看到的，当您打开 Parent1 时，Parent2 似乎位于 Parent1 下。我想澄清的是它不在它下面。

https://codesandbox.io/s/jolly-germain-6fncr?file=/src/App.js