style-components

[hysryt]

https://styled-components.com/

React用のライブラリ CSS in JS

[hysryt]

インストール

npx create-react-app my-app
cd my-app
npm install --save style-components

例

import styled from 'styled-components';

const Button = styled.button`
  background: red;
`;

function App() {
  return (
    <div className="App">
      <Button>button</Button>
    </div>
  );
}

export default App;

styled.button でReactコンポーネントを生成している。

この構文はタグ付きテンプレート文字列リテラルというJavaScriptに元々備わっている構文。

プロパティによってスタイルを変える

import styled, { css } from 'styled-components';

const Button = styled.button`
  background: red;
  ${props => props.primary && css`
    background: blue;
  `}
`;

function App() {
  return (
    <div className="App">
      <Button>button</Button>
      <Button primary>button</Button>
    </div>
  );
}

export default App;