material-ui

I'm using Material UI and trying to convert normal css classes into js file. .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .navItem { float: left; flex: 1; } .navLink { color: white; text-decoration: none; display: block; font-size: '1 rem'; font-weight: 500; line-height: 1.6; letter-spacing: '0.0075em'; opacity: 1; text-transform: 'none'; min-width: 0; padding: 10px; margin-left: 10px; margin-right: 10px; } .navLink-static { color: white; text-decoration: none; display: block; font-size: '1rem'; font-weight: 500; line-height: 1.6; letter-spacing: '0.0075em'; opacity

I'm trying to change the border color of a v4.13 MaterialUI Outlined Input . However I have not gotten anything to work when trying to override the CSS. I've tried multiple CSS rules applied to each element, the select and the OutlinedInput, with the two below being the most recent. What am I doing wrong here? const styles = () => createStyles({ select: { "&:before": { borderColor: "red" }, "&:after": { borderColor: "red" }, }, outline: { "&:before": { borderColor: "red" }, "&:after": { borderColor: "red" }, } }); <Select label={label} fullWidth={true} error={touched && invalid} className=

My app is using Material-UI and material-table . A global theme is applied in the "index.js" file using "ThemeProvider" with as a child and then has children: <Fragment> <CssBaseline /> <MenuAppBar /> <main className={classes.main}> <Route path="/" exact component={Home} /> <Route path="/login" component={Login}></Route> </main> </Fragment> The component then has the component with the material-table. When I add in the table component and view that page the AppBar looses some of it's styling, e.g. background color and alignment in the dropdown buttons for Pofile and Logout ( https://material

I'm trying to use Material-Table component - it's perfect for a table that I'm buildling (add, edit, delete and search rows). I've installed and used it as a child component of a page - everything works but... STYLING: all custom and built-in styling in the page is lost in all the Material UI components (ie. AppBar buttons have no padding/spacing between, custom font styling is messed up). ICONS: The icons in the table won't render - they just appear as large cut-off text. Styling and icons on other pages without the table are not affected. Anybody have a solve? Thanks in advance. For icons, I

Im studying React-Redux, Material-UI. Now, Im trying to create Sample App, but not work. I dont know how to improve my code. I want to open Drawer , when Material-UI AppBar onLeftIconButtonTouchTap is clicked. I cant bind my Action to Component, I think. When following code is running, not fire onLeftIconButtonTouchTap event. And when I change openDrawer to openDrawer(), JS error 'openDrawer is not a function' is found on Chrome Dev tool. Header.jsx as a Component import React, { PropTypes } from 'react'; import AppBar from 'material-ui/AppBar'; import Drawer from 'material-ui/Drawer'; const

Why it is not clear how a MenuItem makes navigation to other route? for example, when clicks on a menu item, I want to route to '/account' I can manage to achieve that using onclick function, but I am sure that there is an easier way. Pleas tell me about it I want to implement it on my project. By the way, when used the containerElement containerElement={<Link to="/dashboard" />} I get the following error: index.js:2177 Warning: React does not recognize the `containerElement` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase

I want to use withRouter on my top-level React component called 'App'. Documentation is here: https://github.com/reactjs/react-router/blob/v2.4.0/upgrade-guides/v2.4.0.md#withrouter-hoc-higher-order-component I use it like this: import React from "react"; import { render } from "react-dom"; import {Router, Link, hashHistory, Route, IndexRoute, withRouter} from "react-router"; import VoteView from "./voteview/Voteview.jsx"; import OverView from "./overview/Overview.jsx"; import AppBar from 'material-ui/AppBar'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; import MuiThemeProvider