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

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

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

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

Q&A

解決済

2回答

1586閲覧

Reactですべてのコンポーネントのフォントを設定したい

sasaki0628

総合スコア106

React.js

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

0グッド

0クリップ

投稿2023/01/24 02:43

編集2023/01/26 11:44

Reactですべてのコンポーネントに共通の font-family を一括で設定したいのですが、どのファイルに設定すればよいでしょうか?

index.html や App.css などに font-family を書いていますがうまくいきません…。

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

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

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

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

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

uky

2023/01/24 03:00

> index.html や App.css などに font-family を書いていますがうまくいきません…。 どのように書いていたのか見せていただくことは可能ですか?
sasaki0628

2023/01/24 07:04

コメントありがとうございます。コンポーネントごとに設定することにいたしました。
guest

回答2

0

ベストアンサー

style-componentsを利用するのはどうでしょうか?
themeに任意のスタイルを設定することができるので、そのthemeを使いたいコンポーネントをproviderで囲みます。sasaki0628さんの場合はすべてのコンポーネントとのことなので、index.jsの<App />を囲めばOKだと思います。

https://tech.asoview.co.jp/entry/2021/10/25/000000

import styled, { ThemeProvider } from 'styled-components' const Button = styled.button` color: ${p => p.theme.color}; // ← green ` export const App = () => { return ( <ThemeProvider theme={{ color: 'green' }}> <Button>Themed</Button> </ThemeProvider> ) }

投稿2023/01/24 07:08

caren

総合スコア25

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

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

sasaki0628

2023/01/26 02:44

ありがとうございます。勉強になりました。
guest

0

グローバルに設定すると逆に面倒だということがわかったので、コンポーネントごとに設定することにしました。

投稿2023/01/24 07:02

sasaki0628

総合スコア106

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問