[React]styled componentsで子要素にも適応する！

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

styled componentsを使う！

Semantic UI Reactを使用中
Menu.Itemにも適応させる場合、どの様なコードになるのかちょっと分からなかったのでメモとして残す

index.js

import React from "react";

import { Menu } from "semantic-ui-react";

const MenuStyled = styled(Menu)`
  &&& {
    width: calc(100% - 20px);
    margin: 10px;
  }
`;

&&&はこの記事を見て理解した！

！！？？ああ、トリッキーだ。&&& {}って何だ。
AAAというアンカーがあったとすれば、
AAAとして.myLinkでデザインしていくことになると思いますが、それと同じ振る舞いをします。
これはCSSの詳細度と闘っています。

const MenuStyled = styled(Menu)でMenu.Itemにもcssを反映させたい場合は以下の方法でいけた！

index.js

import React from "react";

import { Menu } from "semantic-ui-react";

const MenuStyled = styled(Menu)`
  &&& {
    width: calc(100% - 20px);
    margin: 10px;
  }
  &&&.ui.menu .item {
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-weight: 600;
  }
`;

参考にした記事

・How do you use first-child or last-child selectors with SC?