styled system

opacity

Confira as propriedades de estilos destinadas a opacity.

índice

como utilizar

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

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

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

// ...

<MyComponent opacity="base" />
<MyComponent opacity="strong" />

Você também pode utilizar qualquer valor válido para as propriedades, não há restrição para utilizar somente os valores do tema:

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

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

// ...

<MyComponent opacity={0.1} />;
<MyComponent opacity={0.9} />;

utilização com typescript

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

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

import styled from 'styled-components';
import { opacity, type OpacityProps } from '@olist/styled-system';

const MyComponent = styled.div<OpacityProps>`
  ${opacity}
`;

// ...

<MyComponent opacity="base" />;