Category Archives: ReactJS

Overriding Button Styles and Hover Effects – Material UI

Hi everyone,

Just a quick post on how to override the background color and hover effects for buttons in material ui:

Define your class as follows:

const styles = theme => ({
    greenButton: {
        backgroundColor: green[500],
        color: '#FFF',
        '&:hover': {
            backgroundColor: green[400],
            color: '#FFF'

Then just reference it as you normally would:

const styles = theme => ({

const { classes } = this.props;



Multiple Instances of Component Firing Incorrect onChange – ReactJS

Hi everyone,

I ran into a bit of an issue today while trying to render multiple instances of a component on a single page. Each component had a file input that was bound with an onChange event. When triggered the onChange function referenced the first component placed on the page no matter which instance was clicked.

The issue ended up being that the id of the input fields coincidentally overlapped. This meant that there were multiple instances of the field on the page with the same id value. Ensuring that each one was unique resolved the issue.

Took a fair while to narrow this one down so hopefully it’ll be able to help someone else!


Avoiding Wrapper Divs in ReactJs

Hi everyone,

Just a quick post on how you can avoid wrapper divs in ReactJs. It’s particularly useful when populating tables or creating parts of a larger component. Instead of the following:

return (
Frogs Turtles

You can use fragments:

import React, { Fragment } from 'react'
return (

The fragment won’t polute the dom and mean that you don’t need to add any additional styling. Check out these links for more info:

Where to Import Colors from in MaterialUI – ReactJS

Hey everyone,

I ran into the following error while trying to import colors in MaterialUI:

Module not found: Can’t resolve ‘material-ui/styles/colors’

It turns out that the path to colors changed in V1, so a lot of guides aren’t quite right. All you need to do is change it to the following:

/* import {grey, amber} from ‘material-ui/styles/colors’ Original */
import {grey, amber} from ‘material-ui/colors’ /* New */

Thanks to this Github post for the answer:

Full Page Layout Example for Material UI – ReactJS

Hi everyone,

I’ve spent the last couple of days looking into MaterialUI. It seems really good however there are very few examples of a layout wireframe. After digging through Github I came across the following CodeSandbox:

There are a number of other themes and templates available (such as the amazing Material Dashboard) but they are all very in depth and not really suitable for a quick prototype or mock.

Thanks to Luke Peavey for posting the answer on StackOverflow. It definitely deserves a lot more views:

Hopefully, this will be able to save someone else a bit of time!


Pass a Component as a Child Prop and Render it – ReactJs

Hi everyone,

A quick post on how to pass a component as a prop and then render it as a child.

const ChildComponent = () => 
Child Component
; const MainComponent = (props) =>
Main component. Child appears below
; class App extends React.Component { render () { return (
<MainComponent content={} />
); } }

An alternative to all of this that I wasn’t aware of is to to use “children”:

See the Pen ozqNOV by Dan Abramov (@gaearon) on CodePen.

Thanks to the following stackoverflow post for the info:

Module not found: Can’t resolve ‘babel-polyfill’ in ‘C:Userssourcereposfrontendsrc

Hi everyone,

I was looking into asynchronous requests with redux tonight and hit the following error:

Module not found: Can’t resolve ‘babel-polyfill’ in ‘C:Userssourcereposfrontendsrc

This is used to provide a promise polyfill for a fetch package mentioned in the tutorial. In order to fix it, just run the following:

npm install babel-polyfill

Thanks to the following post for the solution: