Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 1x 1x 1x 1x 1x 1x 1x 1x | import MuiButton, { ButtonClassKey } from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import * as _ from 'lodash';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import styled from 'styled-components';
interface ClassesProp {
className?: string;
classes: Record<ButtonClassKey | 'wrapper', string>;
}
interface TestButtonProps
extends Pick<ClassesProp, Exclude<keyof ClassesProp, 'classes'>> {
bg?: string;
classes?: { [key: string]: any };
onClick(): void;
}
const styles = () => {
return {
root: {
color: '#eee',
},
wrapper: {
color: 'blue',
},
};
};
const ClassesNesting: React.SFC<ClassesProp> = ({
className,
classes,
...otherProps
}) => {
const muiClasses = _.pickBy(classes, (item, key) => key !== 'wrapper');
return (
// accept global css, className
<div className={`${classes.wrapper} ${className}`}>
<MuiButton
classes={muiClasses}
variant="contained"
color="secondary"
{...otherProps}
/>
</div>
);
};
const WithStyleButton = withStyles(styles)(ClassesNesting);
const TestButton = styled(WithStyleButton)<TestButtonProps>`
&& {
background: ${props => props.bg};
}
`;
TestButton.propTypes = {
bg: PropTypes.string,
className: PropTypes.string,
classes: PropTypes.objectOf(PropTypes.string),
onClick: PropTypes.func.isRequired,
};
TestButton.defaultProps = {
bg: '#ffa',
};
TestButton.displayName = 'TestButton';
export default TestButton;
|