gatsby(react)でMaterial-UIのthemeにcustom colorを足す(色を追加する)
reactのMaterial-UIのthemeにカラーを追加する方法についてのメモです。
gatsby-browser.js
とgatsby-ssr.js
gatsby-browser.js
とgatsby-ssr.js
に
import { CssBaseline } from '@material-ui/core'
import React from 'react'
import { RecoilRoot } from 'recoil'
//ここから3つをimport
//{ ThemeProvider }と{ MuiThemeProvider }が
//いい感じにMaterial UIでもthemeをいい感じにカスタムできるようにしてくれる
import { ThemeProvider } from 'styled-components'
import { MuiThemeProvider } from '@material-ui/core/styles'
import { theme } from './src/utility/theme'
export const wrapRootElement = ({ element }) => {
return (
<RecoilRoot>
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<CssBaseline />
{element}
</ThemeProvider>
</MuiThemeProvider>
</RecoilRoot>
)
}
これでthemeに設定した色が使えるようになります。
theme.js
下記のような形で、カスタムカラーを追加することが可能です。
ここではgrayfill: '#fff000'
を追加しました。
import { createMuiTheme } from '@material-ui/core/styles'
export const theme = createMuiTheme({
palette: {
primary: {
main: '#EF2D29',
},
secondary: {
main: '#00A7C1',
},
grayfill: '#fff000',
background: {
default: '#fff',
},
},
})
利用
例えば、
Material Iconを grayfill
で塗りたい時
//色々必要なやつはimport(省略)
//使いたいアイコンをインポート
import PersonIcon from '@material-ui/icons/Person'
//propsでthemeに追加したカラーを渡す
const PersonGrayIcon = styled(PersonIcon)`
color: ${props => props.theme.palette.grayfill};
`
const SearchPage = () => {
return (
<PersonGrayIcon />
)
}
export default SearchPage
Author And Source
この問題について(gatsby(react)でMaterial-UIのthemeにcustom colorを足す(色を追加する)), 我々は、より多くの情報をここで見つけました https://qiita.com/AyakoKataoka/items/118fb87e5db4c2f70147著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .