MaterialUIのTheme
みつよし知りたいこと
- 変更/適用方法
- デフォルトで設定されている値
- MaterialUIのコンポーネントのどの部分にThemeのどのプロパティが影響を与えるか
- コードからデフォルトthemeを取得するには
- テキスト（現在はp elementに入力）にthemeを適用するには
補足
- リアルタイムの変更は考えていない
みつよし- Themeをカスタマイズする場合は
ThemeProviderを使う -
ThemeProviderはReactのインターフェースに適合しており、カスタムThemeを適用したいコンポーネントの親にThemeProviderを設定する必要がある - 子エレメントからThemeを使うには
useThemeを経由する
If you wish to customize the theme, you need to use the ThemeProvider component in order to inject a theme into your application. However, this is optional; Material-UI components come with a default theme.
ThemeProvider relies on the context feature of React to pass the theme down to the components, so you need to make sure that ThemeProvider is a parent of the components you are trying to customize. You can learn more about this in the API section.
https://material-ui.com/customization/theming/
みつよしカスタムThemeの生成
デフォルトThemeを一部変更する場合
createMuiTheme を利用する
import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';const theme = createMuiTheme({
palette: {
primary: {
main: purple[500],
},
secondary: {
main: green[500],
},
},
});
https://material-ui.com/customization/theming/
0から作る場合
import { ThemeProvider } from '@material-ui/core/styles';
import DeepChild from './my_components/DeepChild';const theme = {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
};function Theming() {
return (
<ThemeProvider theme={theme}>
<DeepChild />
</ThemeProvider>
);
}
https://material-ui.com/styles/advanced/
みつよしThemeがコンポーネントに与える影響
コンポーネントのAPI Docsの implementation of the component for more detail. からソースを読む
みつよしコードからデフォルトthemeを取得する
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
typography: {
fontSize: defaultTheme.typography.fontSize + 2
}
});
みつよしテキスト（p element）にthemeを適用するには
- a) themeを通常のCSSに変換してpに適用する
- b) pではなくMaterialUIのコンポーネントを用いる
themeを通常のCSSに変換してpに適用する
withStyles を使用する？
クラス経由で指定するようだがよくわからず
pではなくMaterialUIのコンポーネントを用いる
Typography に paragraph=true を設定すれば内部的にpになるが、themeのfontFamilyを読み込んでいない