material-ui

问题 I use Linear Determinate and i want to display how much progress is completed in number. like below image. 回答1: I don't think Material UI provides progress bar as shown in your image above. However, you can make use of React Bootstrap package and get things done. Here is the link - https://react-bootstrap.github.io/components/progress/ 回答2: You could display this.state.completed which shows the percentage value of the progress and the just add some style to it. Of course, you'll have to

问题 When creating my theme for material-ui I added two new palette options that give me a better range of lights and darks. I have extended the Theme type to indicate this import {Theme} from "material-ui/styles"; import {Palette} from "material-ui/styles/createPalette"; export interface ExtendedTheme extends Theme { palette: ExtendedPalette } export interface ExtendedPalette extends Palette { light: Color, dark: Color, } The problem occurs when I try to use these additional options in the

问题 When creating my theme for material-ui I added two new palette options that give me a better range of lights and darks. I have extended the Theme type to indicate this import {Theme} from "material-ui/styles"; import {Palette} from "material-ui/styles/createPalette"; export interface ExtendedTheme extends Theme { palette: ExtendedPalette } export interface ExtendedPalette extends Palette { light: Color, dark: Color, } The problem occurs when I try to use these additional options in the

问题 I'm trying to show a dialog that's only partially modal, as in modal over a specific element, so that the user can still interact with other parts of the application. The docs specify that a dialog component has a container and a fullscreen property. I've tried setting the container property to the div element I want to render the dialog and backdrop on. But without any luck. I want to modal to only be modal on this part of the application as shown in the image. Here are the docs for the

问题 I'm trying to show a dialog that's only partially modal, as in modal over a specific element, so that the user can still interact with other parts of the application. The docs specify that a dialog component has a container and a fullscreen property. I've tried setting the container property to the div element I want to render the dialog and backdrop on. But without any luck. I want to modal to only be modal on this part of the application as shown in the image. Here are the docs for the

问题 I am new to React and Material UI and I am attempting to create an AppBar with Tabs as children. My current implementation looks like this: import {React, PropTypes, Component} from 'react'; import TodoTextInput from './TodoTextInput'; import injectTapEventPlugin from 'react-tap-event-plugin'; import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme' import getMuiTheme from 'material-ui/styles/getMuiTheme' import {Tabs, Tab} from 'material-ui/Tabs'; import {AppBar} from 'material

问题 I get the below error whenever I try to use makeStyles() with a component with lifecycle methods: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: You might have mismatching versions of React and the renderer (such as React DOM) You might be breaking the Rules of Hooks You might have more than one copy of React in the same app Below is a small example of code that produces this error. Other examples

问题 I had successfully used TS with my old HOC styled styles from MUI. But now we have moved to hooks I am unsure to get this to validate. import makeStyles from '@material-ui/core/styles/makeStyles' import { Theme } from '@material-ui/core' export default makeStyles((theme: Theme) => ({ adminNav: { '&.MuiList-root ': { width: '100%', overflow: 'hidden', '& a': { float: 'left', }, }, }, })) Argument type (theme: Theme) => {adminNav: {'&.MuiList-root ': {overflow: string, '& a': {float: string},

问题 I had successfully used TS with my old HOC styled styles from MUI. But now we have moved to hooks I am unsure to get this to validate. import makeStyles from '@material-ui/core/styles/makeStyles' import { Theme } from '@material-ui/core' export default makeStyles((theme: Theme) => ({ adminNav: { '&.MuiList-root ': { width: '100%', overflow: 'hidden', '& a': { float: 'left', }, }, }, })) Argument type (theme: Theme) => {adminNav: {'&.MuiList-root ': {overflow: string, '& a': {float: string},

问题 I'm new to Material-UI, I couldn't able to figure it out, how to change the color of the label which is showing in grey color. I want it in black . Can anyone help me with this query? Here is the Code : import React from "react"; import ReactDOM from "react-dom"; import { TextField, Button, Grid } from "@material-ui/core"; class App extends React.Component { render() { return ( <Grid container justify={"center"} alignItems={"center"} spacing={1}> <Grid item> <TextField id="outlined-name"