TypeScript React, exporting styled component function

Viewed 345

I am exporting a function to use as a mixin for styled components on React.

styles.ts

export const fontSize = (size: number) => `
  font-size: ${(size / 16) * 100}%;
  font-size: ${size / 16}rem;
`

button.tsx

import React, { FC } from 'react'
import styled from 'styled-components'

import { fontSize } from './styles'

type ButtonProps = {
  onClick(): void
}

const StyledButton = styled.button`
  background-color: #4f2e0e;
  font-size: ${fontSize(18)};
  cursor: pointer;
`

const Button: FC<ButtonProps> = (props) => (
  <StyledButton>{props.children}</StyledButton>
)

export default Button

When I do, TypeScript warns:

@typescript-eslint/explicit-module-boundary-types: Missing return type on function.

I have tried to add allowExpressions: true to .eslintjs but is not working:

'@typescript-eslint/explicit-function-return-type': ['warn', { allowExpressions: true}]
0 Answers
Related