質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

944閲覧

Reactで動的にタグを出し分ける際に、styled-jsxでスタイリングしたい

kt-sygo0921

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/07/01 09:14

編集2022/01/12 10:55

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

こちらご教授いただけないでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

font-weight; 700;

これだけが原因かはわかりませんが、とりあえず、:であるべきところが、;になっているようです。

追記

import React from "react"; import ReactDOM from "react-dom"; const HeadingPresenter = ({ tag: Tag, className, ...props }) => { return ( <div className="App"> <Tag className={`test`}>Hello CodeSandbox</Tag> <style jsx>{` .App { color: blue; font-size: 12px; background: #ccc; padding: 5px; } .test { color: red; font-size: 50px; font-weight: normal; } `}</style> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <HeadingPresenter tag='h1' className='sample' />, rootElement );

https://codesandbox.io/s/qqm1891759

上記で動作確認した限りでは問題なく、スタイルが適用されました。

投稿2018/07/01 09:17

編集2018/07/01 09:50
HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kt-sygo0921

2018/07/01 09:21

ご回答ありがとうございます こちら修正を行ってみましたが、表示変わらずでした・・・
kt-sygo0921

2018/07/01 09:27 編集

ご回答ありがとうございます Tagをwrapしているdivに対しては、jsx-****のようなクラスは付与されていること・Tagをh1のような固定のタグに変更することでスタイリングされるため、jsxの設定は問題ないかと思います。
HayatoKamono

2018/07/01 09:38 編集

propsのtagに渡されるのは文字列ですか?クラスが付与されているということは、エラーが出ているという訳ではないのですよね?
kt-sygo0921

2018/07/01 09:46

propsのタグは文字列になります 特にエラーは出ていないですね。 またwrapしているdivに対してスタイリングを記載した場合、divにはスタイルが適応されますが、.hに関してはやはり適当されないですね・・
HayatoKamono

2018/07/01 09:51 編集

wrapしている外のdivに対してもスタイルを適用してみましたが、やはり、問題なくどちらにもスタイルは適用されました。codesandbox上で現象を再現するコードを書いたりできますか?現象を再現出来ないことには何も対応出来ないですね。。
kt-sygo0921

2018/07/01 10:00

追記です 表示確認につきましてはstorybookで行っております
HayatoKamono

2018/07/01 10:06

ERROR in ./node_modules/react-split-pane/dist/index.esm.js Module build failed: Error: Couldn't find preset "./.babelrc.js" relative to directory "/Users/Me/Desktop/atomic_design-ui-component/node_modules/react-split-pane" npm install後、npm run storybookを実行しましたが、 エラーが出てstorybookが立ち上がりません。
HayatoKamono

2018/07/01 10:10 編集

あー、branchが別なのか。-> 追記:branch変えてもstorybookが立ち上がらなかった。
kt-sygo0921

2018/07/01 10:57

ご確認ありがとうございます こちらで確認してみましたが、npmだとエラー吐くみたいです・・ 当方yarnで勧めていたため、特に問題なく実行できていましたがこちらyarnでインストールから実行は可能でしょうか?
HayatoKamono

2018/07/01 21:43 編集

時間ある時にみてみます。質問と関係ないコードも多く含まれていたと思うので、質問の現象を再現するのに必要なファイル、コードのみの最低限のレポジトリをあげておいて頂けませんか? (追記) というよりは、後からこの質問を閲覧する人のことを考えた場合、やはり、質問文に掲載しているコードが現象を再現しているコードに修正されるべきだと思います。現状、質問自体が息をしていないので。
kt-sygo0921

2018/07/02 10:12 編集

ご確認ありがとうございます ご指摘いただきまして、申し訳ございません 参考書のサンプルコードに準拠しているため、codesandboxに記載してみました https://codesandbox.io/s/k58wrlmkk5 こちらご確認いただけますでしょうか? codesandbox上ですと特に問題なく表示されているため、storybookとstyled-jsxの相性が悪いのかもしれません
HayatoKamono

2018/07/03 01:44

codesandbox上では問題なく表示されているようなので、コード自体には問題がないという切り分けはできたのだと思います。現象を再現出来る最小限のものにして、さらなる問題の切り分けをした方が良さそうですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問