material-ui

问题 I'm trying to figure out how to annotate the types of the following styles (I converted from plain JavaScript to TypeScript and am adding type annotations): import * as React from 'react' import { withStyles } from '@material-ui/core' @withStyles(styles) // TYPE ERROR HERE export default class App extends React.Component<{}, {}> { render(): JSX.Element { return ( <div className="some-class"> Hello </div> ) } } function styles() { return { // assume I need to use global styles, my actual

问题 How do I add a space in between two Typography components and align them at the bottom? Here's my code: <div style={{ display: "flex" }}> <Typography variant="title" color="inherit" noWrap> Project: </Typography> <Typography variant="body 2" color="inherit" noWrap> Example </Typography> </div> It looks like this: Working example: https://codesandbox.io/s/llqry78p29 来源： https://stackoverflow.com/questions/51053161/material-ui-place-a-space-between-two-typography-components

问题 I am referring to the documentation of React Material-UI (https://material-ui.com/components/autocomplete/). In the demo code, <Autocomplete options={top100Films} getOptionLabel={(option: FilmOptionType) => option.title} style={{ width: 300 }} renderInput={params => ( <TextField {...params} label="Combo box" variant="outlined" fullWidth /> )} /> I get how it works, but I am not sure how I am supposed to get the selected value. For example, I want to use the onChange prop to this so that I can

问题 class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("..."), ), body: Container( color: Colors.green, child: OutlineButton( onPressed: () { }, color: Colors.orange, highlightColor: Colors.pink, child: Container( color: Colors.yellow, child: Text("A"), ), shape: CircleBorder(), ), ), ); } } The above code gives a transparent button. How can I get an orange OutlineButton? 回答1: To modify the backgroundColor of

问题 First post here and I'm on wits end, any help would be kindly appreciated. When trying to access the Login component of my MERN app on the production version, I get a series of the following type errors shown in this image: My app (https://github.com/ahaq0/kumon_schedule) works perfectly fine locally and was working perfectly fine hosted on heroku earlier today. I tried rolling back all of the changes in the code that I made today to no avail. Similarly, I checked the package.json (and .lock)

问题 In Material UI, to extend the distance between MuiInputLabel and MuiInput , I have to override the marginTop of label + .MuiInput-formControl . However, createMuiTheme 's override only provide direct override of a Mui Component CSS, such as: createMuiTheme({ overrides: { MuiInput: { formControl: { marginTop: '1.5rem', }, }, } }) How can I do something like: createMuiTheme({ overrides: { 'label+MuiInput': { formControl: { marginTop: '1.5rem', }, }, } }) Thanks... 回答1: Here's the relevant JSS

问题 I have recently started working with vs code. I am using material ui with react and type script. But I am not able to import the components of material ui using alt(option) + enter shortcut. I am using mac and the typescript version that I am using is 3.0.3. However, the react components that I am creating explicitly, those I am able to import using the above mentioned shortcut. Following is the package.json that I am using: { "name": "portfolio", "version": "1.0.0", "description": "", "main"

问题 I am new to responsive material design. when I move to smaller screens, Sports Status should stay in the right corner. and 4Standard, 5Standard, 6Standard, 7Standard, 8Standard, 9Standard should come to next line. i googled and found the below line for media queries and tested color is changing, but not sure how to change the layout ["@media (min-width:780px)"]: { // eslint-disable-line no-useless-computed-key backgroundColor: "red" } is it possible to change the structure of my layout using

问题 I am working on a project using Webpack 4.10.2 and Material-UI v1.1.0 . MUI docs is talking about class name generator, and I am OK with the result of shortening classes names, but there is something I don't understand in the build process, I am probably missing a Webpack Module or Plugin (I am for instance just using babel-loader and no Plugin). I just tryed many combinations with UglifyJsPlugin (through optimization.minimizer) compress and mangle but nothing works. The problem: The class

问题 I am struggling to find documentation on (or results via experimenting with code) what the purpose is of having booleans as values for breakpoint props for the grid component in material-ui. Consulting the grid api documentation reveals that booleans are valid values for the breakpoint props lg, md, sm, xl, xs. I understand that if I say sm={3} I will get a component that changes to take up 3 grid column units once the display width increases beyond the xs breakpoint (600px) but have no idea