Search code examples
csstypescriptstyled-componentsstorybooktippyjs

Declaration type to use CSS file import (tippy.js)

I'm trying to use tippy.js css in my project in storybook / typescript / styled-components

I import the css file in my styled-component but I typescript ask me declaration type to use it.

Cannot find module 'tippy.js/themes/material.css' or its corresponding type declarations.

This is my styled-component file :

import styled from 'styled-components';

import Tippy from '@tippyjs/react';
import tippyCss from 'tippy.js/dist/tippy.css';
import tippyMaterialCss from 'tippy.js/themes/material.css';

export const TooltipStyle = styled(Tippy)`
${tippyCss}
${tippyMaterialCss}
`;

Do you know what i should put in the declaration type file ? Thanks a lot.

Solution

  • Did you try importing the stylesheet in the document head?

    <link rel="stylesheet" href="tippy.js/themes/material.css">

    Edit: That was my very first comment. If for some reason the 'typescript' module controls .css file imports: https://stackoverflow.com/a/41946697/17449845

    This response contains a few lines of code pertaining to declaring modules in Typescript.