ReactでCSS変数を使いたい

Question

前提・実現したいこと

React(TypeScript) × Railsでアプリケーション開発しています。各ユーザーごとに画面UIの色を変更したいと思い調べていると、CSS変数というものを見つけました。ただ、ReactでのCSS変数の使い方がイマイチ分からず、全体の方針などお教えいただけると嬉しいです。

React (TypeScript)
Ruby on Rails
material UI

やりたいことのフロー

1. 今ベタがきでCSSの色を指定しているところを変数で統一する
2. ユーザーテーブルにカラーコードを追加し、ユーザーごとにカラーコード(#FFFFFF的な)を入力できる画面を用意する
3. 各ユーザーが持つカラーコードをDB上から引っ張り、フロントに渡す
4. フロント側のCSS変数で色がユーザーごとに出し分けられる

まずは、"1"をやりたいと考えています。現状、すべてのカラーコードをベタがきしているのでこれを変数化したいです。
また、Material UIを用いているため、ThemeTemplate.tsxで変数管理するのも良いのではと思っています。(その場合、Rails側からどのControllerで渡すべきなのかイマイチ分からないのですが。。)

• ThemeTemplate.tsx

const theme = createMuiTheme({
  overrides:{
    MuiCard:{
      root:{
        background: 'none',
        'box-shadow': 'none'
      },
    },
  palette: {
    primary: {
      main: "#efefef",
      light: "#faabcb",
      dark: "#cccccc"
    },
  },
省略...
})

• index.tsx (実際の色を変更したいユーザー側の画面)

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      padding: theme.spacing(1, 2),
      color: "white",
    },
    hogehoge: {
      backgroundColor: "#FEE8EA", //ここを変数化したい
    },
省略...
 })
)

試したこと

通常のCSSでの書き方などは記事があったのですが、Reactのものはなかなか見つからず、どのように書けるのかがわかりませんでした。

CSS カスタムプロパティ (変数) の使用

また、ただ1ファイル内で変数化して管理を楽にするのではなく、DB側からユーザーに紐づくカラーコードのデータを取ってきてそれを変数に入れるなどをしたいので、Rails側も考慮して変数化が必要なのでは　と考えています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

Reactでスタイルを動的に制御したい場合は値を明示的に差し替えるだけで可能です。まずは、オーソドックスなやり方の説明から入るとわかるのではないかと。

const hogehoge = "black"
<div style={{background-color: hogehoge}}>

この変数hogehogeに値を変えていくだけです。要はオブジェクトリテラルの中にスタイル制御用のブラケットが入っている状態です。

const hogehoge = "black"
<div style={
    {background-color: hogehoge}
}>

あとはこの要素に対し、clickイベントなどで値を差し替えるだけです

const stylecolor = "black"
const ev = false //判定用フラグ
const anycolor = '' //取得した任意のカラー
const [color,setColor] = useState("")
const handle = (e)=>{
   let ev = e.target.value
   if(ev === stylecolor){
        anycolor = stylecolor
   }else{
        anycolor = ''
   }
   setColor(anycolor)
}
return (
 <div
 onClick={handle(anycolor)}
 style={{background-color: anycolor}}
></div>
)

CSS変数はこの応用です。さっきまでのやり方だとプロパティの値だけを制御する必要がありましたが、CSS変数を用いることでプロパティごと設定が可能になります。

const = style{ "--my-css-var": 10 } as React.CSSProperties;
render(){
  return <div style={style}></div>
}

こんな感じで…

※CSS変数がちゃんと動くかはこれから検証しますが、自分もちょうど今スタイルをリアクティブ制御しているところです。

Comments

[Romay]

ありがとうございます！　
今回はクリック等で色を変えるのではなく、ユーザーごとに色を変えるので、Material-UIのpaletteで管理できないかトライしてみようと思います。

Answer 2

Default Theme - Material-UI

Theme はここにある構造のようになっていて theme.palette.primary.main で取得できます。

Comments

[Romay]

ありがとうございます！　
themeTemplateのprimary.mainで設定をし、反映させるtsxファイルのuseStyle内で呼び出したのですが、themeTemplateで設定した色が反映されず、デフォルトの#3f51b5のままになってしまいました。useStyle内で呼び出すのが間違っているのでしょうか。

呼び出す側のファイル
const useStyles = makeStyles((theme: Theme) =>
createStyles({
hogehoge: {
backgroundColor: theme.palette.primary.main,
}
})

また、import ThemeTemplate from "../../layouts/ThemeTemplate" という形でimportしています。

[anozon]

ThemeProvider を設定していない可能性があります

[Romay]

ありがとうございます。

呼び出す側のファイル(index.tsx)のreturn 内で、
<Button color="primary" > </Button>のようには利用できています。
createStyle内でのcssだけ反映されていないのですが、この場合もThemeProviderが原因でしょうか。

return内で利用できているので、themeTemplate.tsxファイルには問題なく、index.tsxファイルで呼び出しはできているものの、createStyle内での呼び出し方が違うのかと思いました。

[anozon]

https://codesandbox.io/s/makestyles-material-ui-forked-8qp54?file=/src/index.js
サンプルで試してみました
<ThemeProvider> を書いているコンポーネントの中で呼び出さなければいけません

[Romay]

ご丁寧にありがとうございます！　
ただ、呼び出しファイル側でThemeProviderを使っておらず、returnの中は、<ThemeTemplete>にしています。その中で直接color="primary"とすると呼び出せています。一方、createStyle内でクラスを作り、classNameでクラスを当てたところだと色が反映されません。
こちらの新しい質問に詳細を記載したのでこちらでご回答いただけますでしょうか。
https://teratail.com/questions/352291
解決できましたらどちらもベストアンサーにさせていただければと思います。