styled system

overflows

Confira as propriedades de estilos destinadas ao overflow.

índice

como utilizar

Nós temos diversas propriedades disponíveis em relação ao overflow:

import { overflow, overflowX, overflowY } from '@olist/styled-system';

Você pode importar somente a desejada ou pode utilizar a função overflows que encapsula todas em uma só.

// isso é o equivalente que importar todas as funções acima
import { overflows } from '@olist/styled-system';

Para utilizar basta aplicar a função desejada em seu "styled-component":

import styled from 'styled-components';
import { overflowX } from '@olist/styled-system';

const MyComponent = styled.div`
  ${overflowX}
`;

// ...

<MyComponent overflowX="auto" />
<MyComponent overflowX="clip" />
<MyComponent overflowX="hidden" />
<MyComponent overflowX="inherit" />
<MyComponent overflowX="initial" />
<MyComponent overflowX="revert" />
<MyComponent overflowX="scroll" />
<MyComponent overflowX="unset" />
<MyComponent overflowX="visible" />

utilização com typescript

Para utilizar as funções de overflow com typescript é necessário importar o tipo correspondente a função utilizada do pacote @olist/styled-system:

Supondo que você está utilizando a função overflowY você deve importar o tipo OverflowYProps:

import styled from 'styled-components';
import { overflowY, type OverflowYProps } from '@olist/styled-system';

const MyComponent = styled.div<OverflowYProps>`
  ${overflowY}
`;

// ...

<MyComponent overflowY="scroll" />;

utilizando todas as propriedades de uma só vez

Você pode utilizar a função overflows para aplicar todas as propriedades de uma só vez, basta importar a função overflows e o seu tipo OverflowsProps:

import styled from 'styled-components';
import { overflows, type OverflowsProps } from '@olist/styled-system';

const MyComponent = styled.div<OverflowsProps>`
  ${overflows}
`;

// ...

<MyComponent overflow="hidden" overflowX="visible" overflowY="auto" />;

utilizando a função overflows você terá disponível as seguintes propriedades para utilizar em seu componente:

propriedadealiasestype
overflow-OverflowProps
overflows-OverflowsProps
overflowX-OverflowXProps
overflowY-OverflowYProps