Styled-Componentsで::after、::beforeのcontentを動的に変更するときの注意

タイトル通り。ハマるのでメモ。

component

任意のメッセージを疑似要素で表示するコンポーネントの例。

component

import React from "React";
import styled from "styled-components";

type Props = {
  className?: string;
  message: string;
}

const BaseComponent: React.FC<Props> = (props) => {
  return (
    <div className={props.className}>
      {props.children}
    </div>
  );
}

export const Component = styled(BaseComponent)`
  position: relative;
  &:before {
    content: "(ここをPropsの値で動的に変更したい)"
    ...略
  }
`

×

普通に受け渡せばうまくいく気がするが・・・
これはうまくいかない。
contentが正しい形ではないため、beforeの要素自体出現しない。

export const Component = styled(BaseComponent)<Pick<Props, "message">>`
  position: relative;
  &:before {
    content: ${({message}) => return message}
    ...略
  }
`

〇

contentはクオーテーションで囲まれた文字である必要がある。
これだけで解決。

export const Component = styled(BaseComponent)<Pick<Props, "message">>`
  position: relative;
  &:before {
    content: "${({message}) => return message}"
    ...略
  }
`