material-ui

I have a Material UI Select component that is on a dark background, so for just this one component I'd like to change it so that the text and line colours are all white. The rest of the Select instances should remain unchanged. While I can get the text and icon to change colour, I can't seem to figure out how to use the classes prop to set the underline colour. My attempts also seem to make the open icon wrap to the next line too. Here's an example demonstrating the problem: I've set my style like this: const styles = theme => ({ underline: { borderBottom: '2px solid white', '&:after': { //

I´m having some troubles on getting an image from props on a CardMedia image: <Card className={classes.card}> <CardMedia className={classes.img} image={this.props.recipe.thumbnail} /> <CardContent className={classes.content}> <Typography gutterBottom variant="headline" component="h2"> {this.props.recipe.title} </Typography> <Typography component="p"> {this.props.recipe.ingredients} </Typography> </CardContent> <CardActions> <Button href={this.props.recipe.href} Recipe </Button> </CardActions> </Card> It just doesnt render at all the images; all the other props values are rendered as they has

I'm using version 1.2.1 of material-ui and I'm trying to overwrite the AppBar component to be transparent. The documentation outlines how to overwrite styles here . My code: import React, { Component } from 'react'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import logo from '../Assets/logo.svg'; class NavigationBar extends Component { render() { const styles = { root: { backgroundColor: 'transparent', boxShadow: 'none', }, }; return ( <AppBar position={this.props.position} classes={{ root: styles.root }}> <Toolbar> <img src={logo} style={{

0x0 React16新特性 官网： https://reactjs.org/ 新特性 官方说明 react+react-dom包大小：40k → 30k 整个代码都用Fiber重新了 error boundary 捕获react渲染过程中的错误 可以在正式环境中，弹个提醒告诉用户 错误日志，辅助排错 开发中排错 new render return types render function中支持直接返回数组、字符串 Protals：可以在组件中，把一个标签强制插入到页面任意其他标签下 服务端渲染的升级 - 可以使用「流」的方式做渲染了 在有服务端渲染的情况下，使用hydrate方法渲染客户端内容 0x1 Material-UI的安装和使用 官网： https://www.material-ui.com/ 说明：React components that implement Google's Material Design 注意：需要考虑到服务端渲染相关配置 特点：直接在js里面写css文件，可以有非常好的动态性 目标：展示出来Material-UI的一个Button 基础使用 & 配置服务端渲染 安装 https://material-ui.com/getting-started/installation/ npm i @material-ui/core @material-ui

I have been trying to work out how to style a material-ui.next textfield component. <TextField id="email" label="Email" className={classes.textField} value={this.state.form_email} onChange={this.handle_change('form_email')} margin="normal" /> My classes are created as follows: const styles = theme => ({ textField: { width: '90%', marginLeft: 'auto', marginRight: 'auto', color: 'white', paddingBottom: 0, marginTop: 0, fontWeight: 500 }, }); My problem is that I can not seem to get the colour of the text field to change to white. I seem to be able to apply styling to the overall text field

If anyone is familiar with css and Material UI any help with this would be much appreciated. Basically I'm trying to implement a Material UI Drawer component which when opened doesn't just slide out over the top of the page content, but rather the page content conforms around the drawer i.e squeezes or expands. I'm using bootstrap rows and containers in my project, but I have no clue how I'd use them to achieve this. Here's how my component is laid out: <div> <AppBar onLeftIconButtonTouchTap={this.handleToggle} title="Imaginary Company" /> <Row> <QuotesList /> </Row> <Drawer containerStyle={{