How to use typestyle - 10 common examples

public render() {
        const classes = paragraphMenuCheckRadioClasses();
        const { checked, type, icon, text, onClick } = this.props;
        const isRadio = type === IMenuBarItemTypes.RADIO;
        const globalStyles = globalVariables();
        const iconStyle = style({
            width: unit(globalStyles.icon.sizes.default),
            height: unit(globalStyles.icon.sizes.default),
        });
        const checkStyle = style({
            color: colorOut(globalStyles.mainColors.primary),
        });
        return (

public render() {
        const classes = paragraphMenuCheckRadioClasses();
        const { checked, type, icon, text, onClick } = this.props;
        const isRadio = type === IMenuBarItemTypes.RADIO;
        const globalStyles = globalVariables();
        const iconStyle = style({
            width: unit(globalStyles.icon.sizes.default),
            height: unit(globalStyles.icon.sizes.default),
        });
        const checkStyle = style({
            color: colorOut(globalStyles.mainColors.primary),
        });
        return (

export function textarea(c: Context) {
  const raw = textareaRaw(c);
  const textareaClass = style(raw.normal);
  return {
    container: style(raw.container),
    textarea: textareaClass,
    underline: style(raw.underline, {
      $nest: {
        [`.${textareaClass}:focus + &`]: raw.focusUnderline,
      },
    }),
    label: style(raw.label),
  };
}

export function sidebar(context: IContext) {
  const { rem, font } = context;
  const { sizes, weights } = font;

  return {
    container: style({
      height: '100%',
    }),
    header: {
      title: style(sizes.title, weights.semibold),
      welcomeText: style({
        marginTop: rem(0.8),
      }),
    },
    body: {
      button: style({
        width: '100%',
        marginTop: '8px',
        marginBottom: '8px',
      }),
    },
  };
}

};

  static getSelected = (): ActiveFilter[] => {
    return FilterSelected.selectedFilters || [];
  };

  static isInitialized = () => {
    return FilterSelected.selectedFilters !== undefined;
  };
}
const rightToolbar = style({
  marginLeft: 'auto'
});

const dividerStyle = style({ borderRight: '1px solid #d1d1d1;', padding: '10px', display: 'inherit' });
const paddingStyle = style({ padding: '10px' });

export class StatefulFilters extends React.Component {
  private promises = new PromisesRegistry();

  constructor(props: StatefulFiltersProps) {
    super(props);

    let active = FilterSelected.getSelected();
    if (!FilterSelected.isInitialized()) {
      active = FilterHelper.getFiltersFromURL(this.props.initialFilters);
      FilterSelected.setSelected(active);
    } else if (!FilterHelper.filtersMatchURL(this.props.initialFilters, active)) {
      active = FilterHelper.setFiltersToURL(this.props.initialFilters, active);
      FilterSelected.setSelected(active);
    }

id?: string;
  outlined?: boolean;
  primary?: boolean;
  style?: CSSProperties;
  title: string;
  tooltip: string;
}

export interface Breadcrumb {
  displayName: string;
  href: string;
}

const backIconHeight = 24;

const css = stylesheet({
  actions: {
    display: 'flex',
    marginRight: spacing.units(-2),
  },
  backIcon: {
    fontSize: backIconHeight,
    verticalAlign: 'bottom',
  },
  backLink: {
    cursor: 'pointer',
    marginRight: 10,
    padding: 3,
  },
  breadcrumbs: {
    color: color.inactive,
    fontFamily: fonts.secondary,

*
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import * as React from 'react';
import { CompareState } from '../pages/Compare';
import Button from '@material-ui/core/Button';
import ExpandedIcon from '@material-ui/icons/ArrowDropUp';
import { stylesheet, classes } from 'typestyle';
import { color, fontsize } from '../Css';

const css = stylesheet({
  collapseBtn: {
    color: color.strong,
    fontSize: fontsize.title,
    fontWeight: 'bold',
    padding: 5,
  },
  collapsed: {
    transform: 'rotate(180deg)',
  },
  icon: {
    marginRight: 5,
    transition: 'transform 0.3s',
  },
});

interface CollapseButtonProps {

import * as React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import ErrorIcon from '@material-ui/icons/Error';
import WarningIcon from '@material-ui/icons/Warning';
import { classes, stylesheet } from 'typestyle';

import { color, commonCss, spacing } from '../Css';

export type Mode = 'error' | 'warning';

export const css = stylesheet({
  banner: {
    border: `1px solid ${color.divider}`,
    boxSizing: 'border-box',
    justifyContent: 'space-between',
    margin: spacing.units(-1),
    minHeight: '50px',
    padding: spacing.units(-4),
  },
  button: {
    color: color.secondaryText,
    maxHeight: '32px',
    minWidth: '75px',
  },
  icon: {
    height: '18px',
    padding: spacing.units(-4),

import { Apis } from '../../lib/Apis';
import { commonCss, padding } from '../../Css';
import InputLabel from '@material-ui/core/InputLabel';
import Input from '@material-ui/core/Input';
import MenuItem from '@material-ui/core/MenuItem';
import ListSubheader from '@material-ui/core/ListSubheader';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import { classes, stylesheet } from 'typestyle';

export const css = stylesheet({
  button: {
    marginBottom: 20,
    width: 150,
  },
  formControl: {
    minWidth: 120,
  },
  select: {
    minHeight: 50,
  },
  shortButton: {
    width: 50,
  },
});

export interface TensorboardViewerConfig extends ViewerConfig {

*
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import * as React from 'react';
import Tooltip from '@material-ui/core/Tooltip';
import WarningIcon from '@material-ui/icons/WarningRounded';
import { Row, Column } from './CustomTable';
import { color, fonts, fontsize } from '../Css';
import { stylesheet } from 'typestyle';

export const css = stylesheet({
  cell: {
    $nest: {
      '&:not(:nth-child(2))': {
        color: color.inactive,
      },
    },
    alignSelf: 'center',
    borderBottom: 'initial',
    color: color.foreground,
    fontFamily: fonts.secondary,
    fontSize: fontsize.base,
    letterSpacing: 0.25,
    marginRight: 20,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',