Material-ui: muiThemeable not compatible with TypeScript

[rfgamaral]

I'm trying to use the current theme colors and styles on my custom components but the way muiThemeable works doesn't seem to be compatible with TypeScript.

Please look at this thread: http://stackoverflow.com/questions/41149648/using-material-ui-muithemeable-in-typescript

Is that guy right or is muiThemeable actually usuable right now with TypeScript? If so, can anyone give an example? Because I can't get it to work and I can't find any example of this working...

Thanks.

[oliviertassinari]

The implementation of the muiThemeable Higer-order Component it's really simple and straightforward. If we have an issue with TypeScript, I don't think that it's limited to Material-UI.

Is that guy right or is muiThemeable actually usable right now with TypeScript?

Doesn't he provide an answer with?

export function muiThemeable<TComponent extends React.Component<P, S>, P extends MuiThemeProviderProps, S> (Component: new () => TComponent): React.StatelessComponent<P>

I'm closing that issue.

[rfgamaral]

@oliviertassinari I'm no expert on TypeScript, I just started using it... But that seems like a function declaration that doesn't do anything by itself.

I still have no idea how can I invoke muiThemeable on my custom React components to allow them to use the theme from Material-UI. Can you help me with that?

[oliviertassinari]

I'm no expert on TypeScript, I just started using it...

From my perspective, you need a large codebase & team to justify using a type checking system. Otherwise, the ratio value/cost is < 1.

Are you using any other Higher-order component like react-redux or recompose?
Try with a simple one.

[rfgamaral]

From my perspective, you need a large codebase & team to justify using a type checking system. Otherwise, the ratio value/cost is < 1.

Sorry, but I strongly disagree with you. From my point of view, languages like JavaScript - which lack a type checking system - simply suck. Maybe I'm biased, since I have a strong background on Java and C#. I very much dislike JavaScript mostly for lacking a type checking system (and other things, but let's not got there). We could be discussing this all day long, but this not the time nor the place. Let's just agree to disagree :)

Are you using any other Higher-order component like react-redux or recompose?

I'm not using either. I've just started this small project this past week using TypeScript and React, two technologies I'm starting to learn and I want to start simple and with basic stuff.

For now, I just have some custom components that I'd like to style with the properties from the MUI theme...

[jonorogers]

After struggling with this today, I ended up just re-implementing muiThemeable in my project to get proper type support.

import * as React from 'react'
import { getTheme } from '../theme'
import { MuiTheme } from 'material-ui/styles';

export interface IThemedProps {
    muiTheme?: MuiTheme
}

export const withTheme = () =>
    <TOriginalProps extends {}>(
        Component: (React.ComponentClass<TOriginalProps & IThemedProps> | React.StatelessComponent<TOriginalProps & IThemedProps>)
    ) => {

        const MuiComponent: React.SFC<TOriginalProps> = (props: TOriginalProps, context: any) => {
            const { muiTheme = getTheme() } = context;

            return <Component muiTheme={muiTheme} {...props } />
        }

        return MuiComponent
    }

getTheme is a function which returns your theme (or the default)

Usage:

interface IProps extends IThemedProps {
    myProp: string
}

const MyCustomComponent : React.SFC<IProps> = ({ myProp, muiTheme }) => {

    const buttonColor = !disabled ? muiTheme!.palette!.textColor : muiTheme!.palette!.alternateTextColor
    ...
}

export const MyCustom = withTheme()(MyCustomComponent)