Styled Components

Library

Styled Components is a JS library made for styling React components:

Visual primitives for the component age.Use the best bits of ES6 and CSS to style your apps without stress

This is actually the library of choice for creating styles in Matchplat applications.

In case you need to develop custom components, for very specific needs of your APP in development, you have to use styled-components.

import styled from "styled-components";

//typescript type injection
type MyComponentStyle = {
  color: string;
  badgeValue: number;
};

const MyComponents = styled.div<MyComponentStyle>`
  ...
  background-color: ${(props) => theme.getColor(props.color)};
  transform: ${(props) =>
    props.badgeValue > 0 ? "scale(1) translate(50%, -50%)" : "scale(0)"};
  transform-origin: 100% 0%;
  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  ...
`;

Learn more about Styled Components

(You don't need to install styled-components since It's already into Crono Dependecies)

Library​

Library