Mantine入門　2 スタイルを書く

2022年10月6日 12:16

ライティングスタイルの概要

Mantineはemotionを使ったcss-in-js libraryで構築されています。ライブラリの競合などを避けるため、可能な限りcreateStylesを作ってスタイリングすることを推奨します。
createStylesは以下のように使います。

import type { NextPage } from 'next'
import { createStyles } from '@mantine/core'

const useStyles = createStyles((theme, _params, getRef) => ({
    wrapper:{
        backgroundColor:theme.colors.blue[0],
        maxWidth: 400,
        width: '100%',
        height:200,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: theme.radius.sm,
    },
    child:{
        backgroundColor:theme.colors.gray[0],
        padding: theme.spacing.md,
        borderRadius: theme.radius.sm,
        boxShadow: theme.shadows.md,
    }     

}))

const StyleDemo:NextPage =()=>{
    const { classes } = useStyles();
    return (
        <div className={classes.wrapper}>
            <div className={classes.child}>createStyles</div>
        </div>
    )
}

export default StyleDemo

関数（NextPage）コンポーネントの外でcreateStylesのインスタンスuseStylesを定義し、コンポーネントの中でインスタンスを呼び出すとclassesオブジェクトが帰ってくるので、JSXの要素のclassName に設定してあげています。

以下のような、指定した要素の直下にある要素にスタイルを適用するセレクタ「＞」についても、

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>css</title>
        <style>
            .red {
                color: orange;
            }
            .dev > .red {
              color: red;
              font-weight: bold;
            }
        </style>
    </head>
    <body>
        <p class="red">out</p>
        <div class="dev">
            <p class="red">in</p>
        </div>
        <p class="red">out</p>

    </body>
</html>

createStyles内でgetRef関数を用いると、再現できます。

import type { NextPage } from 'next'
import { createStyles } from '@mantine/core'

const useStyles = createStyles((theme, _params, getRef) => ({
    red:{
        ref:getRef('red'),
        color:"#FF8000",
    },
    dev: {
        [`& .${getRef('red')}`]: { // [& .red]:のイメージ
            color:"#FF0000",
             fontWeight:'bold'
            }
      },

}))

const StyleDemo:NextPage =()=>{
    const { classes } = useStyles();
    return (
        <>
        <p className={classes.red}>out</p>
        <div className={classes.dev}>
            <p className={classes.red}>in</p>
        </div>
        <p className={classes.red}>out</p>
        </>
    )
}

export default StyleDemo

component props概要

Mantineエレメントによってはcomponent propsが定義されているものがあります。

次のように使用します。

import type { NextPage } from 'next'
import { Container, Slider } from '@mantine/core'

const StylesAPI:NextPage =()=>{

    return (
        <Container>
            <Slider 
                defaultValue={30}
                marks={[
                    { value: 20, label: '20%' },
                    { value: 50, label: '50%' },
                    { value: 80, label: '80%' },
                  ]}
                   />
        </Container>
    )
}

export default StylesAPI

Styles API概要

MantineエレメントによってはStylse APIが定義されているものもあります。

次のように設定できます。

import type { NextPage } from 'next'
import { Container, Slider } from '@mantine/core'

const StylesAPI:NextPage =()=>{

    return (
        <Container>
            <Slider 
                defaultValue={30}
                marks={[
                    { value: 20, label: '20%' },
                    { value: 50, label: '50%' },
                    { value: 80, label: '80%' },
                  ]}
                styles={(theme) => ({
                    markLabel:{
                        color:theme.colors.red,
                        fontFamily:"fantasy"
                    }

                })}
            />
        </Container>
    )
}

export default StylesAPI

components propsについて

共通の設定（props）

全てのMantineコンポーネントは以下のpropsを持ちます。

className
sx
m,my,mx,mt,mb,ml,mr
p,py,px,pt,pb,pl,mr

className

className は、最初に指名したおり、createStylesで作成した名前付きのスタイルオブジェクトを設定します。複数の要素にわたって共通のスタイルを適用できます。

SX

sx プロパティは、個別の要素にインラインでスタイルを適用します。:hoverなどの擬似クラス、メディアクエリなどの設定もできます。

import type { NextPage } from 'next'
import { Container, Text} from '@mantine/core'

const StylesAPI:NextPage =()=>{

    return (
        <Container>
            <Text
                sx={{
                        color:'#008080',
                        '&:hover': {
                            backgroundColor: '#F00000',
                        },
                    }}
            >
                My custom text
            </Text>
        </Container>
    )
}

export default StylesAPI

マージンm,my,mx,mt,mb,ml,mr

m:上下左右のマージンを設定します。
my:上下のマージンを設定します。
mx:左右のマージンを設定します。
mt:上のマージンを設定します。
mb:下のマージンを設定します。
ml:左のマージンを設定します。
mr:右のマージンを設定します。

パディング　p,py,px,pt,pb,pl,pr

p:上下左右のパディングを設定します。
py:上下のパディングを設定します。
px:左右のパディングを設定します。
pt:上のパディングを設定します。
pb:下のパディングを設定します。
pl:左のパディングを設定します。
pr:右のパディングを設定します。

{数値}か"xs","sm","md","lg","xl"の文字列で指定します。"-sm"のような表記でマイナスを表現できます。

文字列指定の場合の初期値は下記です。
{ xs: 10, sm: 12, md: 16, lg: 20, xl: 24 }

MantineProviderで下記のように変更することができます。

import { MantineProvider } from '@mantine/core';


const Some =()=> {
  return (
    <MantineProvider theme={
       { spacing: { xs: 15, sm: 20, md: 25, lg: 30, xl: 40 } }}>
      ////
      JSX
      ////
    </MantineProvider>
  );
}

マージン、パディングの例を示します。

import type { NextPage } from 'next'
import { Button, Container, Text} from '@mantine/core'

const Stylesmp:NextPage =()=>{

    return (
        <>         
            <Text sx={{backgroundColor:"#80FFFF"}}>
                default
            </Text>
            <Text m={10} sx={{backgroundColor:"#80FFFF"}}>
                margin 10px
            </Text>
            <Text m={20} sx={{backgroundColor:"#80FFFF"}}>
                margin 20px
            </Text>
            <Text p={10} mb={5} sx={{backgroundColor:"#80FFFF"}}>
                padding 10px margin-bottom 5px
            </Text>
            <Text p={20} mb={5} sx={{backgroundColor:"#80FFFF"}}>
                padding 20px margin-bottom 5px
            </Text>
            <Button ml="xs" > ml extra small</Button>
            <Button ml="sm" > ml small</Button>
            <Button ml="md" > ml middle </Button>
            <Button ml="lg" > ml large </Button>
            <Button ml="xl" > ml extra large </Button>
            <Container mt="md">
                <Button ml="md" > ml md</Button>
                <Button ml="-md" sx={{backgroundColor:"#F00"}}> ml md * -1</Button>
            </Container>
        </>
    )
}

export default Stylesmp

colorの設定

Mantineコンポーネントはtheme.colorsで定義された色で動きます。theme.colorsの中に含まれる色はそれぞれ10この色合いを配列として持ちます。

import type { NextPage } from 'next'
import { Button} from '@mantine/core'

const StylesColor:NextPage =()=>{

    return (
        <>        
            <Button color="blue">blue</Button>
            <Button color="blue.0">blue.0</Button>
            <Button color="blue.6">blue.6</Button>
            <Button color="blue.9">blue.9</Button>
            <Button color="red">red</Button>
            <Button color="gray">gray</Button>
            <Button color="pink">pink</Button>
            <Button color="teal">teal</Button>
        </>
    )
}

export default StylesColor

Size

Mantineコンポーネントの大きさは、sizeで指定します。
"xs","sm","md","lg","xl"の文字列を設定できます。
コンポーネントによっては数値で指定出来るものもあります。

import type { NextPage } from 'next'
import { Button,Slider} from '@mantine/core'

const StylesColor:NextPage =()=>{

    return (
        <>        
            <Button size="sm">sm</Button>
            <Button size="md">md</Button>
            <Button size="lg">lg</Button>
            
            <Slider size="md" /> 
            <Slider size="xl" /> 
            <Slider size={20} /> 
        </>
    )
}

export default StylesColor

Shadows

CardやPaperなどのhadowプロパティを下記のように設定できます。

import type { NextPage } from 'next'
import {Card,Paper} from '@mantine/core'

const StylesColor:NextPage =()=>{

    return (
        <Paper p="lg" sx={{backgroundColor:"#F8F8F8"}}>        
            <Card m="xl" shadow="xs">shadow="xs"</Card>
            <Card m="xl" shadow="md">shadow="md"</Card>
            <Card m="xl" shadow="xl">shadow="xl"</Card>
        </Paper>
    )
}

export default StylesColor

独自の影を設定することもできます。
theme.shadowsのパラメータは順に左ずらし幅、下ずらし幅、ぼかし幅、影範囲、影の濃さ（rgba）指定です。

import type { NextPage } from 'next'
import {MantineProvider,Card,Paper} from '@mantine/core'

const StylesColor:NextPage =()=>{

    return (
        <>    
        <MantineProvider
            theme={{
            shadows: {
                xs: '0px 0px 2px 5px rgba(0, 0, 0, 0.2)',
                md: '5px 0px 5px 10px rgba(0, 0, 0, 0.1)',
                xl: '0px 5px 0px 15px rgba(0, 0, 0, 0.3)',
            },
            }}
        >
            <Paper p="lg" sx={{backgroundColor:"#F8F8F8"}}>        
                <Card m="xl" shadow="xs">shadow="xs"</Card>
                <Card m="xl" shadow="md">shadow="md"</Card>
                <Card m="xl" shadow="xl">shadow="xl"</Card>
                <Card m="xl" shadow='0px 0px 5px 10px rgba(0, 0, 0, 0.3)'>shadow="xl"</Card>
            </Paper>

        </MantineProvider>
        </>
    )
        
}

export default StylesColor

この記事が気に入ったらサポートをしてみませんか？

Mantine入門 2 スタイルを書く