Material Ui com Styled Components no React

Raphael Melo — Thu, 10 Sep 2020 16:58:29 +0000

Quando comecei a aprender material ui não tinha noção da sua proporção e possibilidades, pra mim era apenas uma lib engessada, com seus components iguais em todos os sites, criei essa prerrogativa na cabeça porque não sabia como editar seu estilo.

Até que descobri o método styled() do Styled-Components que nos permite estilizar componentes usando exatamente a mesma sintaxe de uma folha de estilo CSS.

Código:

import React from "react";
import Card from "@material-ui/core/Card";
import Typography from "@material-ui/core/Typography";

import styled from "styled-components";

const CardStyled = styled(Card)`
  text-align: center;
  width: 200px;
`;

const TextStyled = styled(Typography)`
  width: 200px;
  height: 100px;
  font-size: 24px;
  color: blue;
  background-color: wheat;
`;

export default function Index() {
  return (
    <CardStyled>
      <TextStyled>Meu Card MUI com texto azul</TextStyled>
    </CardStyled>
  );
}
}

Resultado:

DEV Community: Raphael Melo

Material Ui com Styled Components no React