Material-UI Styled Componentsの基本的な使用方法

1. パッケージのインストールと設定

まず、プロジェクトにMaterial-UIとStyled Componentsをインストールします。以下のコマンドを使用します。

npm install @material-ui/core styled-components

または

yarn add @material-ui/core styled-components

2. Styled Componentsの基本的な使用方法

Styled Componentsを使用すると、Material-UIのコンポーネントを独自のスタイルでラップすることができます。以下は、Buttonコンポーネントをカスタムスタイルでラップする例です。

import React from 'react';
import styled from 'styled-components';
import { Button } from '@material-ui/core';
const CustomButton = styled(Button)`
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
`;
function App() {
  return (
    <div>
      <CustomButton>カスタムボタン</CustomButton>
    </div>
  );
}
export default App;

3. テーマのカスタマイズ

Material-UIのテーマをカスタマイズすることもできます。以下の例では、テーマのprimaryカラーを変更しています。

import React from 'react';
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { Button } from '@material-ui/core';
const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#f44336',
    },
  },
});
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">
        カスタムボタン
      </Button>
    </ThemeProvider>
  );
}
export default App;

4. CSS-in-JSとしてのStyled Componentsの応用

Styled Componentsは、CSS-in-JSの一形態としても使用できます。以下は、独自のスタイルを持つカスタムコンポーネントを作成する例です。

import React from 'react';
import styled from 'styled-components';
const CustomComponent = styled.div`
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
`;
function App() {
  return (
    <CustomComponent>
      カスタムコンポーネント
    </CustomComponent>
  );
}
export default App;

このように、Material-UI Styled Componentsを活用することで、簡単にカスタムスタイルを適用したコンポーネントを作成することができます。是非、上記のコード例を参考にして、自身のプロジェクトで活用してみてください。