【React】CSSのあて方2

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

ReactでのCSSのあて方2

Styled JSX

npm install --save styled-jsxをターミナルで実行

StyledJsx.jsx

export const StyledJSX = () => {
  return (
    <>
      <div className="container">
        <p className="">Styled-JSXの練習</p>
        <button className="">TEST</button>
      </div>
      {//  <style jsx="true">{``}の中にCSSと同様の記述をすることができる。　}
      {// デフォルトでは擬似要素は使用できない}
      <style jsx="true">{`
        .container {
          border: solid 4px #ff7f50;
          border-radius: 20px;
          padding: 8px;
          margin: 10px;
          display: flex;
          justify-content: center;
        }
        .title {
          margin: 0;
          color: #ff7f50;
        }
        .button {
          background-color: #ff7f50;
          border: none;
          padding: 8px;
          border-radius: 8px;
        }
      `}</style>
   </>
  );
};