Reactで動的にタグの出し分けを行うComponentを作成しています。
その際に、各タグについてはstyled-jsxを使用してスタイリングを行おうとしたところ、CSSの指定がされませんでした。
Javascript
1import React from "react"; 2import ReactDOM from "react-dom"; 3 4const HeadingPresenter = ({ tag: Tag, visualLevel, className, ...props }) => { 5 return ( 6 <div> 7 <Tag className={"h"} {...props} /> 8 <style jsx> 9 {` 10 .h { 11 font-weight: 700; 12 line-height: 1.5; 13 color: red; 14 } 15 `} 16 </style> 17 </div> 18 ); 19}; 20 21const HeadingContainer = ({ presenter, level = 2, visualLevel, ...props }) => { 22 level = Math.max(1, Math.min(6, level)); 23 visualLevel = typeof visualLevel != "undefined" ? visualLevel : level; 24 const tag = `h${level}`; 25 // const tag = "h1"; 26 return presenter({ tag, visualLevel, ...props }); 27}; 28 29const Heading = props => ( 30 <HeadingContainer 31 presenter={presenterProps => <HeadingPresenter {...presenterProps} />} 32 {...props} 33 /> 34); 35 36const rootElement = document.getElementById("root"); 37ReactDOM.render( 38 <Heading tag="h1" className="sample"> 39 ほげほげ 40 </Heading>, 41 rootElement 42); 43
こちらご教授いただけないでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/01 09:21
2018/07/01 09:24
2018/07/01 09:27 編集
2018/07/01 09:38 編集
2018/07/01 09:39
2018/07/01 09:46
2018/07/01 09:51 編集
2018/07/01 09:57 編集
2018/07/01 10:00
2018/07/01 10:06
2018/07/01 10:10 編集
2018/07/01 10:57
2018/07/01 21:43 編集
2018/07/02 10:12 編集
2018/07/03 01:44