Как использовать Background image в React styled-components?
Как использовать картинки background в styled components? Везде пишут, что достаточно провести импорт и вписать background: url(${myImg}), но у меня по каким-то причинам это не работает.
Использую next.js.
import img from '../../src/img/test.bmp';
export const CellEmpty = styled.div`
background: url(${img}); // здесь ide подчеркивает img, см ниже
`;
Ошибка:
TS2345: Argument of type 'StaticImageData' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes> & { ...; } & ICellProps, any>>'. Type 'StaticImageData' is not assignable to type 'CSSObject'. Index signature for type 'string' is missing in type 'StaticImageData'.
Ответы (1 шт):
лучше использовать background-image. Так как вернется строка, то внутри нужно обернуть кавычками.
вот так должно работать:
background-image: url('${img}');