Skip to content

Commit

Permalink
[docs] Update duplicate demo
Browse files Browse the repository at this point in the history
  • Loading branch information
merceyz committed Jun 10, 2019
1 parent 75d089e commit f7bf687
Showing 1 changed file with 10 additions and 9 deletions.
19 changes: 10 additions & 9 deletions docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
import React from 'react';
import { styled } from '@material-ui/styles';
import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
import Button, { ButtonProps } from '@material-ui/core/Button';
import { Omit } from '@material-ui/types';

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

interface Props {
interface MyButtonProps {
color: 'red' | 'blue';
}

type MyButtonProps = Props & Omit<MuiButtonProps, keyof Props>;

const MyButton = styled(({ color, ...other }: MyButtonProps) => <Button {...other} />)({
background: (props: Props) =>
const MyButton = styled(
({ color, ...other }: MyButtonProps & Omit<ButtonProps, keyof MyButtonProps>) => (
<Button {...other} />
),
)({
background: (props: MyButtonProps) =>
props.color === 'red'
? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
border: 0,
borderRadius: 3,
boxShadow: (props: Props) =>
boxShadow: (props: MyButtonProps) =>
props.color === 'red'
? '0 3px 5px 2px rgba(255, 105, 135, .3)'
: '0 3px 5px 2px rgba(33, 203, 243, .3)',
Expand Down

0 comments on commit f7bf687

Please sign in to comment.