Typescript & withStyles error when has 'position'

[voronindev]

Compilation error, when:
export const Desktop = withStyles(styles)<Page>(DesktopComponent)

Where:

const styles = {
  container: {
    position: 'absolute', // <-- if we will remove this line, all will be ok
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    padding: 10
  }
}

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

Expected Behavior

Looks like it's a default key, but I have an error.

Current Behavior

Have following compilation error:

error TS2345: Argument of type '{ container: { position: string; top: number; left: number; right: number; bottom: number; paddin...' is not assignable to parameter of type 'Record<"container", Partial<CSSProperties>> | StyleRulesCallback<"container">'.
  Type '{ container: { position: string; top: number; left: number; right: number; bottom: number; paddin...' is not assignable to type 'StyleRulesCallback<"container">'.
    Type '{ container: { position: string; top: number; left: number; right: number; bottom: number; paddin...' provides no match for the signature '(theme: { direction: "ltr" | "rtl"; palette: Palette; typography: Typography; mixins: Mixins; breakpoints: Breakpoints; shadows: ["none", string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string]; transitions: Transitions; spacing: Spacing; zIndex: ZIndex; }): Record<"container", Partial<CSSProperties>>'.

Context

Your Environment

Tech	Version
Material-UI	1.0.0-beta.19
React	16.0.0
browser	Chrome 61.0.3163.100
etc	Typescript template

[pelotom]

This is is due to TypeScript's type widening. It's treating position as a string instead of the literal type you've assigned. You can fix it a number of ways:

const styles = {
  container: {
    // explicitly cast as literal type
    position: 'absolute' as 'absolute',
    // ...
  },
}

// indicate the type at the top level, causing literals to be inferred within the object
const styles: StyleRules<'container'> = {
  container: {
    position: 'absolute',
    // ...
  },
}

// apply withStyles immediately to the styles object, also allowing inference to defeat type widening
const decorate = withStyles({
  container: {
    position: 'absolute',
    // ...
  },
}

Personally I favor the last option.

[pelotom]

If #8819 is merged, you could also do

const styles = {
  container: style({
    position: 'absolute',
    ...
  }),
}

[adriantoine]

@pelotom thanks for the help!

The last one doesn't work for me when I use a function:

const decorate = withStyles(({ palette }) => ({
  container: {
    position: 'absolute',
    // ...
  },
}));

[pelotom]

@adriantoine in this case TypeScript's type inference breaks down... the solution is to provide a type parameter of the class keys:

const decorate = withStyles<'container'>(({ palette }) => ({
    container: {
      position: 'absolute',
      // ...
    },
  }));

[leotm]

i ended up

position: 'absolute' as const

---

equiv to prev example

position: 'absolute' as 'absolute'

but cleaner in latest typescript

[padraicohora]

@pelotom

Thanks for that, I would never have know this