Tema e Estilos#

Todos o houston foi pensando para trabalhar junto com o AntD.

Utilizamos o emotion como engine de styled component.

Uso#

No arquivo raiz de seu projeto, defina sua paleta de cores e adicione o provedor da seguinte maneira:

1. Configure o ThemeProvider no componente raiz.

2. Pronto.

tsx
1
import ThemeProvider, { createTheme } from '@eduzz/houston-ui/ThemeProvider';
2

3
const theme = createTheme('eduzz'); // ou um hex: '#0D47A1'
4

5
<ThemeProvider theme={theme}>...</ThemeProvider>;

Dark Mode#

Basta configurar no ThemeProvider a prop mode.

tsx
1
<ThemeProvider theme={theme} mode='dark'>
2
  ...
3
</ThemeProvider>

Variáveis customizadas#

Caso seja necessário você pode adicionar variáveis extras no theme, que ficarão acessiveis pelo theme.variables.

tsx
1
import ThemeProvider, { createTheme } from '@eduzz/houston-ui/ThemeProvider';
2

3
// declara a definição dessa variáveis para poder tipar pelo typescript
4
declare module '@eduzz/houston-ui/ThemeProvider' {
5
  interface HoustonThemeCustomVariables {
6
    customVar: string;
7
    customObject: { prop: number; };
8
  }
9
}
10

11
const theme = createTheme('eduzz', {
12
  customVar: 'custom value',
13
  customObject: { prop: 1 };
14
});
15

16
<ThemeProvider theme={theme}>...</ThemeProvider>;

Estilizando um componente#

Se estiver usando o VsCode instale a extensão vscode-styled-components

tsx
1
import styled from '@emotion/styled';
2

3
const Component: React.FC<{ className?: string }> = ({ className }) => {
4
  return <div className={className} />;
5
};
6

7
export default styled(Component)`
8
  background-color: red;
9
`;

Performance#

Se criar um component que será muito utilizado (ex. button, typography) não acesse as props dentro do styled, se não cada instância do componente terá sua própria classe invês de compartilhar a mesma.

Veja o exemplo a seguir:

tsx
1
import styled from '@emotion/styled';
2

3
const Component: React.FC<{ active: boolean; className?: string }> = ({ className }) => {
4
  return <div className={className} />;
5
};
6

7
export default styled(Component)`
8
  background-color: ${({ theme, active }) => (active ? theme.primaryColor : 'grey')};
9
`;

Prefira criar uma classe a auxiliar e adicionar essa classe dependendo da prop:

tsx
1
import styled from '@emotion/styled';
2
import { cx } from '@emotion/css';
3

4
const Component: React.FC<{ active: boolean; className?: string }> = ({ className }) => {
5
  return <div className={cx(className, { 'is-active': active })} />;
6
};
7

8
export default styled(Component)`
9
  background-color: grey;
10

11
  &.is-active {
12
    /* O theme pode ser acessado sem problemas */
13
    background-color: ${({ theme }) => theme.primaryColor};
14
  }
15
`;

useTheme#

Caso queria apenas utlizar as variáveis sem criar um estilo é possível utilizar esse hook.

tsx
1
import { useTheme } from '@emotion/react';
2

3
const ComponentsDev = memo<IProps>(props => {
4
  const theme = useTheme();
5
  return <div>Color: {theme.primaryColor}</div>;
6
});