Issue 1:
I am trying to override Grid class names injected by Material-UI, I use the following prop

<Grid
container
spacing={24}
classes={{ 'spacing-xs-24': classes.myspacing }}
>

const styles = {
myspacing: {

// The below nest style is NOT WORKING
'& > $typeItem': {
padding: 0,
},

padding: 0,
}
}

[ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

After overriding, I want the grid items have following style

.MuiGrid-spacing-xs-24-1120 > .MuiGrid-typeItem-1098 {
padding: 0px;
}

Current Behavior

But it seems doesn't work, The devtool still shows the following:

.MuiGrid-spacing-xs-24-1120 > .MuiGrid-typeItem-1098 {
padding: 12px;
}

Your Environment

Tech
Version

Material-UI
beta 30

React
v16.2.0

browser
chrome 61

etc

Issue 2:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Not relevant

Current Behavior

Not relevant

Steps to Reproduce (for bugs)

Not relevant

Context

I am using material-ui@next with Typescript. Unfortunately, the project has sparse information on usage with Typescript especially with withStyles. Though #8598 promises a guide on Typescript, meanwhile I have been using styles typescript unit tests to learn withStyles usage.

Taking cue from the example 2 in unit test I coded a component this way,

const TopBarComponent: React.SFC<Props & WithStyles<ComponentClassNames>> = ({
title,
leftButton,
uiStore,
classes
}) => (
<AppBar position="static">
<Toolbar>
<IconButton color="contrast">
<HomeIcon />
</IconButton>
<Typography type="title" color="inherit" className={classes!.flex}>
{title}
</Typography>
<Button color="contrast" onClick={uiStore.topBarLeftButtonClicked}>
{getButtonLabel(leftButton)}
</Button>
</Toolbar>
</AppBar>
);

const TopBar = withStyles(styles)(TopBarComponent); // (A)

which gave me this error

error TS2322: Type '{ title: "Page not found"; leftButton: ButtonAction.SignIn; uiStore: UIStore; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Props & WithStyles<"flex"> & StyledCompo...'.
Type '{ title: "Page not found"; leftButton: ButtonAction.SignIn; uiStore: UIStore; }' is not assignable to type 'Readonly<Props & WithStyles<"flex"> & StyledComponentProps<string>>'.
Property 'classes' is missing in type '{ title: "Page not found"; leftButton: ButtonAction.SignIn; uiStore: UIStore; }'.

After wasting a lot of time, these posts by @pelotom provided the hint,

#8635 (comment)

#8447 (comment)

I changed my line (A) to

const TopBar = withStyles(styles)<Props>(TopBarComponent);

This fixed the TS error.

Now, I don't have enough experience in Typescript to understand why unit tests does not need to pass props type. But could you please update the unit tests now and keep it updated in the future such that it shows how to handle all sorts of usage. I mean, if unit tests had the example this way

// Example 2
const Component: React.SFC<
ComponentProps & WithStyles<ComponentClassNames>
> = ({ classes, text }) => <div className={classes.root}>{text}</div>;

const StyledExampleTwo = withStyles(styles)<ComponentProps>(Component); // ---> This line
<StyledExampleTwo text="I am styled!" />;

It would have explained the usage more comprehensively.

Bottom line is, while the Typescript guide is underway, please use unit tests to provide thorough usage examples

Also, can anyone explain why does the unit test work without passing prop type ComponentProps, and my component fails to compile unless I pass the prop type Props?

Your Environment

Tech
Version

Material-UI
v1.0.0-beta.16

React
Not relevant

browser
Not relevant

etc
Not relevant