Reactでstyleタグを作る
CSSで非表示にするだけ
DOMには書いておくと、スライドの後ろの方の<img>や<video>がprefetchされる 準備
まず各行に段落構造（インデントの深さ）を見て、section-番号というcss class nameを付けておく
.line.section-番号というCSSセレクタで行にスタイルを当てれるようになる
表示を切り替える
<style>タグを更新する
https://gyazo.com/1084aad0ac79042c1d788e04c1f3ace7
.line:not(.section-番号)
現在表示するべきsection以外を対象にする疑似セレクタ
これにdisplay: none;を当てれば、消える
表示を切り替えるReactコンポーネント
<style>を返せばいい
code:js
export function PresentationCSS ({currentSection}) {
const css = .line:not(.section-${currentSection}) { display: none; }
return <style>{css}</style>
}
childrenには普通にCSSが書けちゃう
<PresentationCSS>コンポーネントを使う
appから<PresentationCSS currentSection={3} />と呼び出す
これで、3ページ目だけを表示するCSSが返ってくる
styleタグはHTMLのどこに書いても良い
Reactの中にstyleタグが書かれれば表示に反映される