material-ui

Material UI and Grid system

由 依然范特西╮ 提交于 2019-11-28 15:24:20
I'm playing a little bit with Material-UI . Are there any options for creating a grid layout (like in Bootstrap )? If not, what is the way to add this functionality? There is a GridList component but I guess it has some different purpose. Material UI have implemented their own Flexbox layout. It appears they initially wanted to keep themselves as purely a 'components' library. But one of the core developers decided it was too important not to have their own . It has now been merged into the core code and was released with v1.0.0 . You can install it via: npm install @material-ui/core It is now

Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh

由 狂风中的少年 提交于 2019-11-28 14:29:39
I am using Material UI v4, i'm exporting my styles from a single file, But the styles won't work in other components styles.js const useStyles = makeStyles(theme => ({ root: { display: 'flex', }, // textField component styles textFieldInput: { margin: theme.spacing(2), width: 250, minWidth: 250, }, formControl: { margin: theme.spacing(2), minWidth: 120, }, }) export {useStyles} In my component file .... const classes = useStyles(styles); return ( <TextField className={classes.textFieldInput} label={label} placeholder={label} error={touched && invalid} helperText={touched && error} {...input}

Change outline for OutlinedInput with React material-ui

由 流过昼夜 提交于 2019-11-28 14:27:49
Quick note: this is not a duplicate of How to change outline color of Material UI React input component? With material-ui (React) I am unable to delete the outline on hover or focus. The reason I am using this input is to request add a little red border when a warning occurs. I can change the focused and hover styles. This is tested in the following image: Where this CSS is applied when the input is focused: outlinedInputFocused: { borderStyle: 'none', borderColor: 'red', outlineWidth: 0, outline: 'none', backgroundColor: 'green' }, Component <OutlinedInput disableUnderline={true} notched=

How to set focus to a materialUI TextField?

由 白昼怎懂夜的黑 提交于 2019-11-28 11:59:17
How can I set the focus on a material-ui TextField component? componentDidMount() { ReactDom.findDomNode(this.refs.myControl).focus() } I have tried above code, but it does not work :( Antonis Zisis You can use the autoFocus attribute. <TextField value="some value" autoFocus /> autoFocus was also not working for me, perhaps since this is a component that's not mounted when the top-level component loads. I had to do something a lot more convoluted to get it to work: const focusUsernameInputField = input => { if (input) { setTimeout(() => {input.focus()}, 100); } }; return ( <TextField hintText=

Material UI remove the yellow background on TextField autofill

由 徘徊边缘 提交于 2019-11-28 11:12:49
问题 I'm having a really hard time to remove the yellow background on autofill from the Material UI TextField component. In older versions I did it this way: const inputStyle = { WebkitBoxShadow: '0 0 0 1000px white inset' }; <TextField ... inputStyle={inputStyle} /> But in the recent version the inputStyle prop was removed and added InputProps instead. I've tried to remove it this way, but the yellow background color still appears: import React from "react"; import PropTypes from "prop-types";

Using createMuiTheme to override default styles on div's, p's, body

由 别来无恙 提交于 2019-11-28 10:27:14
问题 This is perhaps a simple Material UI Theme Customization question. What I want to do is to override the default styling on <body> (and other common tags in the future). Right now at the root of my React tree: import theme from './mui-theme' ReactDOM.render( <Router> <ThemeProvider theme={theme}> <StylesProvider injectFirst> {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} <CssBaseline /> <App /> </StylesProvider> </ThemeProvider> </Router>, document

How can I override ExpansionPanelSummary deep elements with styled-components?

由 纵然是瞬间 提交于 2019-11-28 09:59:18
问题 Using the docs/examples for overriding Material UI styling with styled-components, I've managed to style the root and "deeper elements" within an ExpansionPanel and ExpansionPanelDetails . However, when I use the same technique to return an overridden ExpansionPanelSummary from a function passed to styled() , the ExpansionPanelSummary moves in the DOM and the whole ExpansionPanel no longer renders correctly. The technique in question, as applied to ExpansionPanel (this works as expected, on

Material-UI Autocomplete & TextField triggers google autocomplete

由 柔情痞子 提交于 2019-11-28 05:00:37
问题 I am trying to implement the Autocomplete component into my project but am getting the autofill/autocomplete from the browser after some time. Do you know how I can set it to off ? <Autocomplete id="combo-box-demo" options={battleRepos} getOptionLabel={option => option.full_name} style={{ width: 500 }} renderInput={params => ( <TextField {...params} label="Combo box" variant="outlined" onBlur={event => console.log(event.target.value)} fullWidth /> )} /> 回答1: UPDATE With the release of

Set TextField height material-ui

由 ℡╲_俬逩灬. 提交于 2019-11-28 03:13:16
问题 index.js import React from 'react' import TextField from '@material-ui/core/TextField' import style from './style' import withStyles from 'hoc/withStyles' import { connect } from 'react-redux' class SearchField extends React.Component { constructor (props) { super(props) this.onChange = this.onChange.bind(this) } onChange (event) { const { dispatcher } = this.props this.props.dispatch(dispatcher(event.target.value)) event.preventDefault() } render () { const { classes, placeholder } = this

How do I custom style the underline of Material-UI without using theme?

由 陌路散爱 提交于 2019-11-28 02:23:27
I have success with outline custom styling when variant="outlined" and I use notchedOutline in InputProps . Otherwise - variant=[anything else] where only a bottom border exists - it doesn't work, even with underline as the key/class in InputProps . I've even tried root . export default ({ boxType, classes, value, onChange, style }) => ( <TextField variant={boxType || "standard"} value={value} onChange={onChange} InputProps={{ classes: { notchedOutline: classes.notchedOutline, underline: classes.underline, root: classes.TextInputField }, style }} /> ) In order to determine how to do this, it
订阅 material-ui