フロントデザインエンジニアリングのこと about sns-merng

[Yuya-Furusawa]

Semantic UI + Styled Component

• Semantic UIとかで用意されているコンポーネントのCSSをStyled Componentで上書きできる
  • たぶんMaterial UIとかでも同じようにいける

CSSの更新方法

styled()を使う

import styled from 'styled-component';

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// こんな感じで更新できる
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

Semantic UIでも同じように可能

import { Button } from 'semantic-ui-react';

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

子要素にもCSSを適用するには

CardだけでなくCard.Contentまで

import { Card } from 'semantic-ui-react';

<StyledCard>
    <StyledCard.Content>
        {...}
    </StyledCard.Content>
</StyledCard>

const StyledCard = styled(Card)`
  cursor: pointer;
  // こんな感じで子要素のCSSを直接指定する
  &&&.ui.card .content {
    padding-right: 0;
    padding-left: 0;
  }
`;

分からないこと

• <Card as={Link}>みたいなときにCSSが適用されなくなってしまうのでどう対処するのがスマートだったか？
  • すべてがタグにとして扱われてしまった
  • 以下のように対処した

//これはCSSがうまく適用されなかった
<StyledCard as={Link} to="/" />

//これだとOK
<Link>
    <StyledCard />
</Link>

参照

• Styled Component - Documentation
• [React]styled componentsで子要素にも適応する！

[Yuya-Furusawa]

Styled ComponentでのCSSのoverride

• Styled Componentでは!importantは使ってはいけない（なぜ？）
• 代わりに&&&を使う（これはCSSの詳細度を上げる操作）

//これはダメ
const MyStyledComponent = styled(AlreadyStyledComponent)`
  color: palevioletred !important;
  font-weight: bold !important;
`

//これが正しい
const MyStyledComponent = styled(AlreadyStyledComponent)`
  &&& {
    color: palevioletred;
    font-weight: bold;
  }
`

• ただ、そもそも!importantを使わない設計にすべき
  • 外部のデザインライブラリを使用するなら使う場面出てくるかも

参照

• How can I override styles with higher specificity?