How to use material-ui - 10 common examples

classes: Object,
|};
type Props = {|
  ...ExternalProps,
  ...InternalProps,
|};
function Tour({
  className,
  // eslint-disable-next-line
  classes,
}: Props): React.Element<*> {
  return <div>;
}

const enhance: HOC&lt;*, *&gt; = compose(
  withStyles(styles),
  pure,
);

export default (enhance(Tour): React.ComponentType);
</div>

classes: Object,
|};
type Props = {|
  ...ExternalProps,
  ...InternalProps,
|};
function ICO({
  className,
  // eslint-disable-next-line
  classes,
}: Props): React.Element<*> {
  return <div>;
}

const enhance: HOC&lt;*, *&gt; = compose(
  withStyles(styles),
  pure,
);

export default (enhance(ICO): React.ComponentType);
</div>

const { classes, className, ...other } = props;
    return (
      
    );
  }
  StyledComponent.propTypes = {
    // eslint-disable-next-line react/forbid-prop-types
    classes: PropTypes.object.isRequired,
    // eslint-disable-next-line react/require-default-props
    className: PropTypes.string
  };
  const styles =
    typeof style === "function"
      ? theme => ({ root: style(theme) })
      : { root: style };
  return withStyles(styles, options)(StyledComponent);
};

background: theme.palette.primary.main,
    color: theme.palette.common.white,
  },
  firstHighlight: {
    extend: 'highlight',
    borderTopLeftRadius: '50%',
    borderBottomLeftRadius: '50%',
  },
  endHighlight: {
    extend: 'highlight',
    borderTopRightRadius: '50%',
    borderBottomRightRadius: '50%',
  },
});

export default withStyles(styles)(CustomElements);

children: PropTypes.node.isRequired,
  onAccept: PropTypes.func.isRequired,
  onDismiss: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired,
  dialogContentClassName: PropTypes.string,
  okLabel: PropTypes.string,
  cancelLabel: PropTypes.string,
};

ModalDialog.defaultProps = {
  dialogContentClassName: '',
  okLabel: 'OK',
  cancelLabel: 'Cancel',
};

export default withStyles(styles, { name: 'MuiPickersModal' })(ModalDialog);

)
  }
}
const FlexContainer = styled.div`
  display: flex;
`
const IconWrapper = styled.div`
  display: flex;
  height: 80px;
  width: 80px;
  margin: 10px;
`

export default withStyles(styles)(CommitVote)

<input>
                        search
                    
                }
                value={calcProps.value}
                inputComponent={SelectWrapped}
                inputProps={calcProps}
            /&gt;
        );
    }
}

export default {
    [widgetKey]: withStyles(styles)(Widget as any) as any
};

return (
            <span>
                <button color="{this.props.contrast">
                    {this.props.label}
                </button>
                <dialog open="{this.state.open}">
                    <pre>                </pre></dialog>
            </span>
        );
    }
}

export default withStyles(styles)(CodeModal);

const mapStateToProps = state => {
    return {userAuth: state.userAuth}
};

const mapDispatchToProps = dispatch => {
    return {
        logout: () => dispatch(logout()),
    }
};

TopBar.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default compose(
    withStyles(styles),
    withRouter,
    connect(mapStateToProps, mapDispatchToProps)
)(TopBar);

<div>
            <div>Small Tag</div>
            <h2>
              Header with small subtitle
              <br>
              <small>Use "Small" tag for the headers</small>
            </h2>
          </div>
        
      }
    /&gt;
  );
}

export default withStyles(style)(TypographyPage);