useDensity

Import

import { useDensity } from '@contentful/f36-utils';

Examples

Component styling

The quick brown fox jumps over the lazy dog like an over-motivated frog.
Hide code
function YourComponent() {
  const density = useDensity();

  const styles = {
    paragraph: css({
      color: density === 'high' ? 'red' : 'green',
    }),
  };

  return (
    <Paragraph marginBottom="0" className={styles.paragraph}>
      The quick brown fox jumps over the lazy dog like an over-motivated frog.
    </Paragraph>
  );
}
function YourComponent() {
  const density = useDensity();

  const styles = {
    paragraph: css({
      color: density === 'high' ? 'red' : 'green',
    }),
  };

  return (
    <Paragraph marginBottom="0" className={styles.paragraph}>
      The quick brown fox jumps over the lazy dog like an over-motivated frog.
    </Paragraph>
  );
}