material-ui

Electron + React + Node.js + ES6 开发桌面软件 1、概述 近来工作上需要做一款 PC 上的软件，这款软件大体来讲是类似 PPT 的一款课件制作软件。由于我最近几年专注于移动 App 的开发，对 PC 端开发的了解有些滞后。所以我首先需要看看，在 PC 上采用什么框架能够顺利完成我的工作。 我的目标是，在完成这款软件的同时能够顺便学习一下比较流行的技术。在经过前期技术调研后，我明确了实现这款软件所需要的技术条件： 不采用 C++ 方面的类库，比如 MFC、Qt、DuiLib 等等； 本来想试试 C# 来开发，但 C# 对我来说，需要从头学习，如果学 C# 只为了开发这一款软件，后续再无用武之地，那么对我来说，学习的驱动力不大； 之前学习了移动端的开发库 React Native ，所以对 React 组件化的开发方式颇有好感，所以想尝试用 React 来开发。 2、技术路线 基于以上几点考虑，我通过搜索了解了 Electron 这个框架，果断采用了下面的技术路线： Technical 用途 文档官网 Electron 包装 HTML 页面，为网页提供一个本地运行环境 http://electron.atom.io/docs/ React 用 React 组件来写页面 https://facebook.github.io/react/ Node.js 为

I am trying to get Material Design Lite text field to work and I have an issue where the bottom colored line has a slight 3-4 px gap between the gray starting line. Any MDL text Field example I plug into my page I get the same result, what can locally be triggering the issue? Also I am using react.js on the frontend. I am on 1.2.1 of material design lite. Here is an image: Here is my code: <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input className="mdl-textfield__input" type="text"/> <label className="mdl-textfield__label" htmlFor="nameField"> Your name <

What's the best practice to implement routing using the material-ui@next ? In the previous version I could use containerElement with a Link but doesn't work anymore. Couldn't find any help in the docs. <MenuItem containerElement={<Link to="/myRoute" />}>My Link</MenuItem> You can use Link as parent component for MenuItem : <MenuList> <Link to="/myRoute" style={{ textDecoration: 'none', display: 'block' }}> <MenuItem> go to my route </MenuItem> </Link> <Link to="/anotherRoute" style={{ textDecoration: 'none', display: 'block' }}> <MenuItem> go to another route </MenuItem> </Link> </MenuList>

I'm trying to override the styling of Material-UI v1 components, using the overriding by classes method. When I try to override a nested property, for example the :hover pseudo class on the root key I get the following warning: Warning: Material-UI: the key `.MyButton-root-w:hover` provided to the classes property object is not implemented in Button. You can only overrides one of the following: See for example: import React from "react"; import { createStyleSheet, withStyles } from "material-ui/styles"; import Button from "material-ui/Button"; const buttonStyle = createStyleSheet("MyButton", {

I am trying to open a Dialog box by a button click. When I am clicking the button the Dialog first of all is not opened and I am getting Error : Uncaught TypeError: Cannot read property 'prepareStyles' of undefined. Here is the code for my Component: const muiThemebtn = getMuiTheme({ palette: { alternateTextColor: darkBlack, primary1Color: grey100, } }) export default class MyComponent extends React.Component { constructor (props) { super(props); this.state = {open: true}; this.openModal = this.openModal.bind(this); this.closeModal = this.closeModal.bind(this); } openModal=()=>{ this.setState(

The following messes with the onClick animation (the ListItem turns red): <List> <a href="https://www.google.com"> <ListItem button> <ListItemText primary="Google" /> </ListItem> </a> </List> While adding the link inside ListItem, only makes the transition work if ListItemText is clicked, which is not what I want. What is the correct way to add a link? The easiest way to accomplish this is to make the ListItem a link by using the component prop: <List> <ListItem button component="a" href="https://www.google.com"> <ListItemText primary="Google" /> </ListItem> </List> That way, the ListItem will

I want to pass textfield values when user press enter key from keyboard. In onChange() event, I am getting the value of the textbox , but How to get this value when enter key is pressed ? Code: import TextField from 'material-ui/TextField'; class CartridgeShell extends Component { constructor(props) { super(props); this.state = {value:''} this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.setState({ value: e.target.value }); } render(){ return( <TextField hintText="First Name" floatingLabelText="First Name*" value={this.state.value} onChange={this.handleChange}