ふっちーのやんのかやんねーのかブログ

ITの技術的なこともそうでないことも。

Reactでstyleタグを使いたい

こんな感じで定義する。

const styleTag = <style>{`
  .classname {
    background-color: #f00;
  } 
`}</style>;

brefore,afterも扱える。

const styleTag = <style>{`
  .classname:before {
    content: "";
  }
  .classname:after {
    content: "";
  }
`}</style>;

値に変数も利用できる。

const styleTag = <style>{`
  .classname {
    background-color: ${color};
  } 
`}</style>;

DOMにそっとおいてあげる。

return <div>
  ${styleTag}
  <div className='classname'>
  </div>
</div>

ご利用は計画的に。