How to use styles - 10 common examples

function VideoLink() {
  const css = useStyle({
    ...flexRow(undefined, 'center'),
    // make smaller to hide weird video artifacts
    height: videoHeight - 2,
    width: videoHeight - 2,
    overflow: 'hidden',
  });
  return (
    
      View random polyhedron
      <video height="{videoHeight}" src="{video}" playsinline="" autoplay="" muted="">
    
  );
}
</video>

...flexColumn(),
    height: '100%',
    pointerEvents: 'none',
    padding: scales.spacing[2],
  });

  const resizeButtons = useStyle({
    pointerEvents: 'initial',
  });

  const prompt = useStyle({
    marginTop: scales.spacing[2],
    marginBottom: 'auto',
  });

  const options = useStyle({
    marginTop: 'auto',
    marginBottom: scales.spacing[2],
  });

  const opGrid = useStyle({
    width: '100%',
    pointerEvents: 'initial',
  });

  // TODO I really wanna create a wrapper component for this...
  return (
    <section>
      <div>
        
      </div>
      <div></div></section>

export default function OperationsPanel() {
  const css = useStyle({
    ...flexColumn(),
    height: '100%',
    pointerEvents: 'none',
    padding: scales.spacing[2],
  });

  const resizeButtons = useStyle({
    pointerEvents: 'initial',
  });

  const prompt = useStyle({
    marginTop: scales.spacing[2],
    marginBottom: 'auto',
  });

  const options = useStyle({
    marginTop: 'auto',
    marginBottom: scales.spacing[2],
  });

  const opGrid = useStyle({
    width: '100%',
    pointerEvents: 'initial',
  });

  // TODO I really wanna create a wrapper component for this...
  return (

const Cell = ({ cell, colSpan = 1 }: { cell: string; colSpan?: number }) => {
  const isFake = cell[0] === '!';
  const polyhedron = fromConwayNotation(isFake ? cell.substring(1) : cell);

  const symbol = isFake ? `(${cell.substring(1)})` : cell;

  // Render a link for each cell, or a grayed-out link when indicated by an "!"
  const css = useCellStyle();
  const label = useStyle({ marginTop: scales.spacing[1] });
  return (
    
      {polyhedron ?  : cell}
      <div>{polyhedron &amp;&amp; symbol}</div>
    
  );
};

export default function Description({ title, content, collapsed }: Props) {
  const [isCollapsed, setCollapsed] = useState(collapsed);
  const toggle = () => setCollapsed(collapsed => !collapsed);
  const brief = content.split('\n\n')[0];

  const css = useStyle(flexColumn('center'));
  return (
    <div>
      <div>
        
      </div>
      {isCollapsed &amp;&amp; }
    </div>
  );
}

function Heading({ subsection, text }: { subsection: boolean; text: string }) {
  const H = subsection ? 'h3' : 'h2';
  const css = useStyle({
    marginBottom: scales.spacing[3],
    fontFamily: fonts.times,
    fontSize: subsection ? scales.font[4] : scales.font[3],
  });
  return {text};
}

function Heading({ polyhedron }: RenderProps) {
  const css = useStyle({
    fontSize: scales.font[3],
    marginBottom: scales.spacing[1],
    lineHeight: 1.25,
  });
  return (
    <h2>
      {_.capitalize(polyhedron.name)}, {polyhedron.symbol()}
    </h2>
  );
}

function Title() {
  const css = useStyle({
    marginBottom: scales.spacing[2],
    fontSize: scales.font[2],
    textAlign: 'center',
    fontWeight: 'bold',
    fontFamily: fonts.andaleMono,

    [media.mobile]: {
      fontSize: scales.font[3],
    },
  });
  return <h1>Polyhedra Viewer</h1>;
}

function Title() {
  const css = useStyle({
    textAlign: 'center',
    fontFamily: fonts.andaleMono,
    fontSize: scales.font[3],
    [media.mobile]: {
      fontSize: scales.font[4],
    },
  });
  return <h1>Uh oh! We don't know about that polyhedron!</h1>;
}

return (props: any) => {
    const css = useStyle(styles);
    return ;
  };
}