Styled Components Two Colors in Button

Question

I have here a problem regarding putting the colors on the buttons. My problem is how can I separate the colors?

Codesandbox CLICK HERE

const Button = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 58px;
  width: 30%;
  cursor: pointer;
  font-size: 20px;
  color: #fff;
  background: ${({ backgroundColor = null }) =>
    backgroundColor ? "pink" : "grey"};
  border-radius: 20px;
  border: 3px solid
    ${({ borderColor = null }) => (borderColor ? "#FF0000" : "black")};
`;

Answer 1

You don't need to create two states, for this solution. Necessary only one state to switch between subscribe and unsubscribe. And i added additional css properties, to make it look more similar like the picture above.

index.js

import React from "react";
import styled from "styled-components";

const Button = styled.button`
  padding: 0;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  font-size: 20px;
  color: #fff;
  border-radius: 20px;

  /* new lines */
  border: none;
  outline: none;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px black; /* Why is there a white button enclosing a button */
  & div {
    display: flex;
    align-items: center;
    height: 58px; /* fix for chrome browser */
  }
  & .number {
    background-color: black;
    width: 30%;
    padding: 0 10px;

    /* new lines */
    border-radius: 20px 0 0 20px;
    border-top: 3px solid ${({ subscribe }) => (subscribe ? "#FF0000" : "grey")};
    border-bottom: 3px solid
      ${({ subscribe }) => (subscribe ? "#FF0000" : "grey")};
    border-left: 3px solid
      ${({ subscribe }) => (subscribe ? "#FF0000" : "grey")};
  }
  & .text {
    padding-left: 10px;
    background: ${({ subscribe }) => (subscribe ? "hotpink" : "grey")};

    /* new lines */
    border-top: 3px solid ${({ subscribe }) => (subscribe ? "#FF0000" : "grey")};
    border-bottom: 3px solid
      ${({ subscribe }) => (subscribe ? "#FF0000" : "grey")};
    color: ${({ subscribe }) => (subscribe ? "white" : "black")};
  }
  & .icon {
    padding: 0 10px;
    width: 32px;
    background: ${({ subscribe }) => (subscribe ? "hotpink" : "grey")};

    /* new lines */
    border-radius: 0 20px 20px 0;
    border-top: 3px solid ${({ subscribe }) => (subscribe ? "#FF0000" : "grey")};
    border-bottom: 3px solid
      ${({ subscribe }) => (subscribe ? "#FF0000" : "grey")};
    border-right: 3px solid
      ${({ subscribe }) => (subscribe ? "#FF0000" : "grey")};
    color: ${({ subscribe }) => (subscribe ? "white" : "black")};
    & .bell {
      width: 2rem;
      fill: ${({ subscribe }) => (subscribe ? "white" : "black")};
    }
  }
`;

const Table = () => {
  const [isSubscribe, setIsSubscribe] = React.useState(false);

  const onSetColor = () => {
    setIsSubscribe((prevState) => !prevState);
  };

  console.log(isSubscribe);

  return (
    <div style={{ backgroundColor: "black", padding: "1rem" }}>
      <Button type="button" onClick={onSetColor} subscribe={isSubscribe}>
        <div className="number">100</div>
        <div className="text">Subscribe</div>

        <div className="icon">
          {isSubscribe && (
            <svg className="bell" viewBox="0 0 24 24">
              <path d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z" />
            </svg>
          )}
          {!isSubscribe && (
            <svg className="bell" viewBox="0 0 24 24">
              <path d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
            </svg>
          )}
        </div>
      </Button>
    </div>
  );
};

export default Table;