Material-uiでスタイル(フォント)を動的変更できるタグを作る。

そのまんまです。スタイルを動的に変更できるようにするのに意外とつまずいたので備忘録。

下記結果コード

DIVFONT.jsx

import {
  styled,
} from '@material-ui/core/styles'

const style_font_gothic = styled('div')({
  fontFamily: 'Sawarabi Gothic',
})
const style_font_mincho = styled('div')({
  fontFamily: 'Noto Serif JP',
})

export const DIVFONT = (props) => {
  let _font = style_font_gothic
  if (props.view_font == 'Mincho') {
    _font = style_font_mincho
  } else if (props.view_font == 'Gothic') {
    _font = style_font_gothic
  }
  
  return _font
}

Editor.jsx

import React, {
  //*色々*//
} from 'react'
import { connect } from 'react-redux'
import { DIVFONT } from '../DIVFONT'


const Editor = (props) => {
 const VIEWFONT = DIVFONT(props)

  return (
    <VIEWFONT>フォントが切り替わる文章</VIEWFONT>
	)
}

const mapStateToProps = (state) => {
  return {
    view_font: state.viewFont
  }
}

export default connect(mapStateToProps, {
  //*色々*//
})(Editor)

上から説明します。

```jsx:DIVFONT.jsx
import {
  styled,
} from '@material-ui/core/styles'

const style_font_gothic = styled('div')({
  fontFamily: 'Sawarabi Gothic',
})
const style_font_mincho = styled('div')({
  fontFamily: 'Noto Serif JP',
})

Material-uiにstyledという関数があり、既存のタグをオーバーラップします。
今回はDIVにゴシックと明朝をそれぞれ設定し作成します。

export const DIVFONT = (props) => {
  let _font = style_font_gothic
  if (props.view_font == 'Mincho') {
    _font = style_font_mincho
  } else if (props.view_font == 'Gothic') {
    _font = style_font_gothic
  }
  
  return _font
}

そしてDIVFONTをエクスポート宣言し、引数(今回はReduxのstate)で返すフォント設定を拡張したDIVを返します。

Editor.jsx

import React, {
  //*色々*//
} from 'react'
import { connect } from 'react-redux'
import { DIVFONT } from '../DIVFONT'

const Editor = (props) => {
 const VIEWFONT = DIVFONT(props)
 
 return (
    <VIEWFONT>フォントが切り替わる文章</VIEWFONT>
	)
}

const mapStateToProps = (state) => {
  return {
    view_font: state.viewFont
  }
}

export default connect(mapStateToProps, {
  //*色々*//
})(Editor)

あとは使いたいページ(Editor.jsx)からインポートして、毎更新時に呼び出せばOK。
ポイントとしては情報の詰まったスタイル情報を無理矢理変更するのではく、機能分割したタグを作成し適用させた方が良いという事。
本来タグってそういう思想だったはずだよなと、今回の件で思った次第であります。
今fontタグが非推奨になってるの知らなかったよ。