score:1

Accepted answer

I was able to fix the problem by adding the following rule to my .eslintrc.js

'@typescript-eslint/explicit-function-return-type': [
      'error',
      {
        allowExpressions: true
      }
]

It allows function expressions to not have an explicitely defined return type, which removes the missing return type error from styled components' interpolator functions as they are funcion expressions.

However, I am still not totally happy with this solution as it simply turns the error off instead of fixing it directly. If you have a better solution, please share it.

score:1

The following works:

import styled from 'styled-components';

const StyledApp = styled.div((props) => {
  return {
    background-color: props.theme.colors.secondary,
  };
});

I have set up ThemeProviders in my index.tsx as described here: https://stackoverflow.com/a/58462124/2771889


Related Query

More Query from same tag