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;
<Button size="small" className={classes.greenButton} variant="raised">
      <AddShoppingCartIcon />

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!


LINQ to Entities does not recognize the method ‘System.Linq.IQueryable

Hi everyone,

I ran into the following error today while attempting to use a raw query with entity framework:

LINQ to Entities does not recognize the method ‘System.Linq.IQueryable…method, and this method cannot be translated into a store expression

I was using FromQuery, and while I’m not too sure what was causing the issue, switching to SqlQuery resolved it:

// Original code
var carList = resp.Db.Cars.FromSql(“SELECT * FROM cars”);
// Changed code
var carList = resp.Db.Cars.SqlQuery(“SELECT * FROM cars”);

Hopefully that’s able to help out anyone else with the issue.


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 (

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:

Adding a Link to a Drawer – Material UI and ReactJS

Hi everyone,

I ran into a bit of an issue turning a menuitem into a link with Material UI and React-Router. The main problems being that underlines appeared and threw the spacing out.

To summarize, use the component attribute on the ListItem:

   <ListItem button component={Link} to="https://www.whatibroke.com">
        <ListItemText primary="WhatIBroke" />

The official docs cover it here: https://material-ui.com/api/list-item/

See the following stackoverflow post for more info: https://stackoverflow.com/a/50558139/522859

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: https://github.com/mui-org/material-ui/issues/6446

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: https://stackoverflow.com/a/50312721/522859

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 = () => <div>Child Component</div>;
const MainComponent = (props) => <div><div>Main component. Child appears below</div>{props.content}</div>;
class App extends React.Component {
  render () {                                        
    return (
          <MainComponent content={<ChildComponent />} />          

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: https://stackoverflow.com/a/41499555/522859

Remote Desktop: An authentication error has occurred. – This could be due to CredSSP encryption oracle remediation.

Hi everyone,

I ran into an auth issue with remote desktop today:

An authentication error has occurred.
The function requested is not supported.
Remote computer: XXXX

This could be due to CredSSP encryption oracle remediation.
For more information, see hhtps://go.microsoft.com/fwlink/?linkid=866660

The solution is to add the May 2018 Windows Security Update on both the remote and local machines. If that’s not possible a registry entry can be added to the local machine to circumvent the issue. This can be done by running the following command in a command prompt as administrator:

REG ADD HKLM\Software\Microsoft\Windows\CurrentVersion\Policies\System\CredSSP\Parameters\ /v AllowEncryptionOracle /t REG_DWORD /d 2

You can also add the entry manually via regedit.

The cause is actually because of a security update in windows. If either the remote or local machine has the update and the other does not the error is triggered. There’s more info available on the following page: https://github.com/stascorp/rdpwrap/issues/480

Web API 2 – ExceptionMessage=No MediaTypeFormatter is available to read an object of type ‘HttpPostedFileBase’ from content with media type ‘multipart/form-data’.

Hi everyone,

I ran into the following error while trying to get image uploads working with Web API 2:

ExceptionMessage=No MediaTypeFormatter is available to read an object of type ‘HttpPostedFileBase’ from content with media type ‘multipart/form-data’.

I had been trying to copy the following from an mvc controller in another project:

public IHttpActionResult Upload(HttpPostedFileBase file, Models.Image.ImageAssociationType associationType, int associationId)

The fix was to use the following instead:

public IHttpActionResult Upload(Models.Image.ImageAssociationType associationType, int associationId)
var file = HttpContext.Current.Request.Files.Count > 0 ? HttpContext.Current.Request.Files[0] : null;

Thanks to this stackoverflow post for the info: https://stackoverflow.com/a/28370156/522859