グラマラスを使用したReactコンポーネントのスタイリング

投稿日: 2022-04-20 2022-10-06
タグ: React

💄glamorousは、CSS-in-JS用の軽量ライブラリであり、 styled-components’に似たシンプルなAPIを備えており、内部でglamorを利用します。。 styled-componentsと比較した主な違いの2つは、JavaScriptオブジェクトリテラルの使用と、追加の名前付きコンポーネントを作成せずにDOM要素を直接使用できる追加のAPIです。

グラマラスを使用してコンポーネントにスタイルを与える方法を見ていきましょう。

インストール

開始するには、いくつかのパッケージが必要です： glamorous 、 glamor 、 prop-types ：

$ npm install glamorous glamor prop-types

# or, using Yarn
$ yarn add glamorous glamor prop-types

次に、それを使い始めるためにあなたがしなければならないのは、ライブラリからデフォルトのエクスポートをインポートすることです：

SomeComponent.js

import glamorous from 'glamorous';

// ...

基本的な使用法

魅力的なコンポーネントを作成し、任意のDOM要素の名前を使用して、CSSプロパティ名（キャメルケース）と値を含むオブジェクトリテラルを提供するスタイルを指定します。

import React from 'react';
import glamorous from 'glamorous';

const Box = glamorous.div({
  background: 'pink',
  marginTop: 30, // defaults to pixels
  padding: '2rem 3rem'
});

const MyComponent = () => {
  return (
    <Box>
      <h1>A title inside a pink box! 🌸</h1>
    </Box>
  );
};

export default MyComponent;

小道具

コンポーネントを作成するときに2番目の引数としてコールバック関数を使用して、魅力的なコンポーネントに渡された小道具にアクセスできます。

import React from 'react';
import glamorous from 'glamorous';

const Box = glamorous.div(
  {
    marginTop: 30, // defaults to pixels
    padding: '2rem 3rem'
  },
  props => ({
    background: props.bg
  })
);

const MyComponent = () => {
  return (
    <Box bg="purple">
      <h1>A title inside a purple box! 🌸</h1>
    </Box>
  );
};

export default MyComponent;

メディアクエリ、疑似要素、疑似クラス

グラマラスを使用したメディアクエリは、実際には同じように簡単です。

// ...

const Box = glamorous.div({
  maxWidth: '60%',
  background: 'antiquewhite',
  margin: '1rem auto',
  padding: '2rem 3rem',
  ['@media (max-width: 600px)']: {
    maxWidth: '90%',
    background: 'lightseagreen'
  }
});

// ...

同様に、疑似要素および疑似クラスの場合：

// ...

const Box = glamorous.div({
  maxWidth: '60%',
  background: 'antiquewhite',
  margin: '1rem auto',
  padding: '2rem 3rem',
  transition: 'background .3s',
  [':hover']: {
    background: 'lightseagreen'
  },
  [':before']: {
    content: '"Hello"',
    background: 'pink',
    padding: '.5rem 1rem'
  }
});

// ...

：before疑似要素の単一引用符内で二重引用符が使用されていることに注意してください。この構文は、疑似要素が正しく機能するために重要です。

代替使用法

より単純で小さなコンポーネントの場合は、特定のDOM要素に対応するコンポーネントをインポートして直接使用する代替APIを使用することもできます。このようにして、魅力的なコンポーネントの名前を思い付く必要がなくなります。

import React from 'react';
import { Div, H1 } from 'glamorous';

const MyComponent = () => {
  return (
    <Div background="antiquewhite" margin="1rem auto" maxWidth="60%">
      <H1 className="card-title" borderBottom="2px solid purple">
        A title inside an antique white box! 🌸
      </H1>
    </Div>
  );
};

グラマラスは、ネイティブ要素の属性とスタイルの小道具を区別するのに十分スマートです。上記の例では、 card-title クラスが、border-bottomスタイルのglagramousによって生成されたクラスに加えて追加のクラスとして要素に追加されます。

テーマ

魅力的なThemeProviderコンポーネントを利用して、ツリーの下のすべてのコンポーネントで利用できるようになるテーマ情報を提供できます。

たとえば、Appコンポーネントからテーマを提供する方法は次のとおりです。

App.js

import React, { Component } from 'react';
import { ThemeProvider } from 'glamorous';

import Card from './Card';

const theme = {
  default: {
    background: '#f3f3f3',
    color: '#525252'
  },
  dark: {
    background: '#231919',
    color: '#FFDABC'
  }
};

class App extends Component {
  state = {
    currentTheme: 'default'
  };

  handleClick = () => {
    this.setState(state => ({
      currentTheme: state.currentTheme === 'default' ? 'dark' : 'default'
    }));
  };

  render() {
    const currentTheme = this.state.currentTheme;

    return (
      <ThemeProvider theme={theme[currentTheme]}>
        <React.Fragment>
          <Card />
          <Card />
          <button onClick={this.handleClick}>Toggle theme</button>
        </React.Fragment>
      </ThemeProvider>
    );
  }
}

export default App;

ボタンのonClickハンドラーは、2つのテーマを切り替え、ThemeProviderの子コンポーネントは自動的にテーマデータにアクセスできるようになります。

魅力的なコンポーネントを作成するときに、コールバックに渡された小道具からテーマにアクセスできます。

Card.js

import React from 'react';
import glamorous from 'glamorous';

const Box = glamorous.div(
  {
    maxWidth: '60%',
    margin: '1rem auto',
    padding: '2rem 3rem'
  },
  ({ theme }) => ({
    background: theme.background,
    color: theme.color
  })
);

const MyComponent = () => {
  return (
    <Box>
      <h1>A title inside a pink box! 🌸</h1>
    </Box>
  );
};

export default MyComponent;

グローバルスタイリング

glamorousはグローバルなスタイルに煩わされることはなく、代わりにglamorの css.global に戻って、アプリにいくつかのグローバルなスタイルを注入することができます。

App.js

// ...other imports
import { css } from 'glamor';

css.global('html, body', {
  background: '#f3f3f3',
  margin: 0
});

// ...

🤓そして、グラマラスへの私たちの小さなイントロはこれで終わりです。より高度な使用例については、公式ドキュメントを参照してください。

getdocs

13036