How to use the baseui.withStyle function in baseui

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

/* eslint-disable flowtype/require-valid-file-annotation */

import React from 'react';
import {withStyle} from 'baseui';
import {Navigation, StyledNavItem as NavItem} from 'baseui/side-navigation';
import {Label2, Label3} from 'baseui/typography';
import Link from 'next/link';

import Routes from '../routes';

const StyledNavItem = withStyle(NavItem, ({$theme, $active}) => {
  const styleOverride = {};

  if ($theme.name.startsWith('dark')) {
    if ($active) {
      styleOverride.background = $theme.colors.backgroundSecondary;
    }
  }
  return {
    paddingTop: $theme.sizing.scale200,
    paddingBottom: $theme.sizing.scale200,
    ...styleOverride,
  };
});

const removeSlash = path => {
  if (path) {

import {withStyle} from 'baseui';
import {StyledSpinnerNext} from 'baseui/spinner';

const ExtraLargeSpinner = withStyle(StyledSpinnerNext, {
  width: '96px',
  height: '96px',
  borderWidth: '12px',
  borderTopColor: 'pink',
});

export default ExtraLargeSpinner;

31,
    '100 Broadway st. New York City, New York',
  ],
  [
    2,
    'Jane',
    'Smith',
    32,
    '100 Market st. San Francisco, California',
  ],
  [3, 'Joe', 'Black', 33, '100 Macquarie st. Sydney, Australia'],
];

const COLUMNS = ['Id', 'First Name', 'Last Name', 'Age', 'Address'];

const SmallerHeadCell = withStyle(StyledHeadCell, {
  maxWidth: '30px',
});

const SmallerCell = withStyle(StyledCell, {
  maxWidth: '30px',
});

export default () => {
  const [css] = useStyletron();
  return (
    <div>
      
        
          ID
          {COLUMNS.slice(1).map((col, index) =&gt; (
            {col}</div>

import Search from 'baseui/icon/search';
import Plus from 'baseui/icon/plus';
import Delete from 'baseui/icon/delete';
import Overflow from 'baseui/icon/overflow';
import {
  StyledTable,
  StyledHead,
  StyledHeadCell,
  StyledBody,
  StyledRow,
  StyledCell,
  StyledAction,
} from 'baseui/table';
import {Caption1, Caption2, Paragraph3} from 'baseui/typography';

const StyledHeadingCell = withStyle(StyledCell, {
  paddingTop: 0,
  paddingBottom: 0,
});

const StyledDeltaCell: any = withStyle(StyledCell, props => ({
  ...props.$theme.typography.font550,
  alignItems: 'center',
  backgroundColor: props.$isNegative
    ? props.$theme.colors.negative50
    : props.$theme.colors.positive50,
  color: props.$isNegative
    ? props.$theme.colors.negative
    : props.$theme.colors.positive,
}));

const StyledLargeText = withStyle(StyledCell, {

Delete,
  Overflow,
} from 'baseui/icon';
import {
  StyledTable,
  StyledHead,
  StyledHeadCell,
  StyledBody,
  StyledRow,
  StyledCell,
  StyledAction,
} from 'baseui/table';
import {Caption1, Caption2, Paragraph3} from 'baseui/typography';
import {Theme} from 'baseui/theme';

const StyledHeadingCell = withStyle(StyledCell, {
  paddingTop: 0,
  paddingBottom: 0,
});

const StyledDeltaCell = withStyle<
  typeof StyledCell,
  {$isNegative: boolean},
  Theme & {customThemeProp: string}
>(StyledCell, ({$isNegative, $theme}) => ({
  ...$theme.typography.font550,
  alignItems: 'center',
  backgroundColor: $isNegative
    ? $theme.colors.negative50
    : $theme.colors.positive50,
  color: $isNegative
    ? $theme.colors.negative

import {Button} from 'baseui/button';
import {FlexGrid, FlexGridItem} from 'baseui/flex-grid';
import {StyledLink as Link} from 'baseui/link';
import {H1, H2} from '../components/markdown-elements';
import {Card, StyledBody} from 'baseui/card';
import {Tag} from 'baseui/tag';
import fetch from 'isomorphic-fetch';
import {withStyle} from 'baseui';

import BlogPosts from '../posts.js';

import Layout from '../components/layout';
import Contributors from '../components/contributors';
import Markdown from '../components/markdown-elements';

const MinHeightBody = withStyle(StyledBody, {
  minHeight: '150px',
});

type Contributor = {
  avatar_url: string,
  html_url: string,
  login: string,
  type: 'Bot' | 'User',
};

const cardOverrides = {
  Root: {
    style: ({$theme}) => ({
      marginLeft: $theme.sizing.scale600,
      marginRight: $theme.sizing.scale600,
      marginTop: $theme.sizing.scale500,

display: 'block',
          },
        })}
      >
        
          <span aria-label="open announcement modal" role="img">
            🎁
          </span>
        
      
    
  );
};
const MinHeightBody = withStyle(ModalBody, {
  minHeight: '350px',
});
const Content = [
  () =&gt; {
    return (
      
        
          We are happy to announce a new, interactive API documentation for Base
          Web!
        
        
          We have removed the old, auto-generated API documentation from the
          site, in favour of a new, interactive documentation, that writes code
          for you!

const StyledDeltaCell = withStyle<
  typeof StyledCell,
  {$isNegative: boolean},
  Theme & {customThemeProp: string}
>(StyledCell, ({$isNegative, $theme}) => ({
  ...$theme.typography.font550,
  alignItems: 'center',
  backgroundColor: $isNegative
    ? $theme.colors.negative50
    : $theme.colors.positive50,
  color: $isNegative
    ? $theme.colors.negative
    : $theme.colors.positive,
}));

const StyledLargeText = withStyle(StyledCell, {
  alignItems: 'center',
});

const DATA = [
  [
    'Marlyn',
    'Engineering',
    'San Francisco',
    -100,
    1234.5,
    {
      title: 'New York',
      data: '100 Broadway st. New York City, New York',
    },
  ],
  [

paddingTop: 0,
  paddingBottom: 0,
});

const StyledDeltaCell: any = withStyle(StyledCell, props => ({
  ...props.$theme.typography.font550,
  alignItems: 'center',
  backgroundColor: props.$isNegative
    ? props.$theme.colors.negative50
    : props.$theme.colors.positive50,
  color: props.$isNegative
    ? props.$theme.colors.negative
    : props.$theme.colors.positive,
}));

const StyledLargeText = withStyle(StyledCell, {
  alignItems: 'center',
});

const DATA = [
  [
    'Marlyn',
    'Engineering',
    'San Francisco',
    -100,
    1234.5,
    {
      title: 'New York',
      data: '100 Broadway st. New York City, New York',
    },
  ],
  [

import React from 'react';
import {withStyle} from 'baseui';
import {StatefulMenu, OptionList, StyledList} from 'baseui/menu';
import {List, AutoSizer} from 'react-virtualized';

const ITEMS = [...new Array(1500)].map((_, index) => ({
  label: `item number: ${index + 1}`,
}));

const Container = withStyle(StyledList, {height: '500px'});

const VirtualList = React.forwardRef((props: any, ref) => {
  const children = React.Children.toArray(props.children);
  return (
    
      
        {({width}) => (
           (