Emotion + Reactでcssプロップがないというエラーが出たときの対策 

import {jsx,css} from '@emotion/core';

emotion11で破壊的変更が入ったのでimportするライブラリ名を以下の通りに変更します

import {jsx,css} from '@emotion/react'

create-react-app を使っている場合

tsconfig.jsonのcompilerOptionsでtypesを追加

"jsx": "react-jsx",
"types": ["@emotion/react/types/css-prop"],

またファイルの冒頭に以下のコメントアウトを入れます。GitHubに書いてありました。

/** @jsxRuntime classic */
/** @jsx jsx */

VS CodeでEmotionのCSSをハイライトするエクステンション

vscode-styled-componentsをインストールします。VS Codeのエクステンショの追加タブから追加できます。

インストールされると以下のようにCSS-in-JSのコードが表示されます。

エクステンション適用後

emotionでplaceholderのスタイルを変更する

&::placeholoderでplaceholderのスタイルを指定できます。 

const inputStyle = css`
&::placeholder{
font-family: serif;
}`
© 2024 atnr.net. All rights reserved.