styled-componentsにて、親コンポーネントの特定要素にスタイルを付与したいです。

Question

###　実現したいこと

const Btn = () => {return<button>sample</button}

このBtn内のbutton要素を、子コンポーネント内からスタイルを付与したいです。

const Btnのbuttonを青色にしたい = () => {
return(
  <Btn />
);

const Btnのbuttonを赤色にしたい = () => {
 return(
   <Btn />
);

Answer 1

こんにちは

ご質問から、やりたいことは

• ベースとなるボタンのコンポーネント Btn を作り、
• Btn をベースにして、色が赤、および青のボタンコンポーネントを作る。
• 上記を styled-components で実現する。

という感じかなと思われました。

以下は上記を実現する一例です。

styles.js

import styled from "styled-components";

const Btn = styled.button`
  font-size: 16px;
  color: white;
  padding: 8px;
  border: solid 1px transparent;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
`;

export const RedBtn = styled(Btn)`
  background-color: #ea0000;
  :hover {
    background-color: #880000;
  }
  :active {
    background-color: #ff0000;
  }
`;

export const BlueBtn = styled(Btn)`
  background-color: #0000ea;
  :hover {
    background-color: #000088;
  }
  :active {
    background-color: #0000ff;
  }
`;

export const ButtonsWrapper = styled.div`
  display: flex;
  justify-content: space-around;
  width: 300px;
  margin-top: 50px;
  margin-left: 50px;
`;

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BlueBtn, RedBtn, ButtonsWrapper } from "./styles";

const App = () => (
  <ButtonsWrapper>
    <BlueBtn>青いボタン</BlueBtn>
    <RedBtn>赤いボタン</RedBtn>
  </ButtonsWrapper>
);

ReactDOM.render(<App />, document.getElementById("root"));

• 動作確認用codesandbox: https://codesandbox.io/s/q254432-xwwxg

以上、参考になれば幸いです。

Comments

[退会済みユーザー]

ありがとうございます！