CSS Override

Em alguns casos específicos, pode ser necessário aplicar algum override de estilos em um componente do Copan. Para estes casos, os componentes tem classes com o padrão de nome Copan_Componente. Para ver o nome de uma classe específica, inspecione o componente via DevTools.

Utilizando o Stitches

Exemplo de estilização customizada para o componente Image a partir de uma classe construída com o método css do Stitches (depende de ter a lib Stitches no projeto).

() => {
  // import { css } from '@stitches/react';
  const containerClassName = css({
    '.Copan_Image': {
      borderRadius: border.radius.lg,
    }
  })().className;

  return (
    <div className={containerClassName}>
      <Image src="https://via.placeholder.com/160x160" />
    </div>
  )
}

Utilizando CSS puro

Exemplo de estilização customizada para o componente Image a partir de uma classe construída com CSS simples. Lembre-se de importar o arquivo .css.

// styles.css
// ...
.Copan_Image {
  border-radius: 24px;
}

// SomeComponent.jsx
// ...
() => {
  return (
    <>
      // content
      <Image src="https://via.placeholder.com/160x160" />
    </>
  )
}