How to use the flipper.styled.div function in flipper

display: 'inline-flex',
  height: '16px',
  alignItems: 'center',
  '': {
    marginLeft: 10,
    '.icon-button': {
      height: 16,
    },
    'img,div': {
      verticalAlign: 'top',
      alignItems: 'none',
    },
  },
});

const ToolbarContainer = styled.div({
  '.drop-shadow': {
    boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
  },
});

const SearchInputContainer = styled.div({
  width: '100%',
  marginLeft: 5,
  marginRight: 9,
  position: 'relative',
});

class SearchBar extends Component {
  state = {
    inputFocused: false,
    autoCompleteSheetOpen: false,

padding: 5,
  borderRadius: 100,
  backgroundPosition: 'center',
  transition: 'background 0.5s',
  ':hover': {
    background:
      'rgba(155, 155, 155, 0.2) radial-gradient(circle, transparent 1%, rgba(155, 155, 155, 0.2) 1%) center/15000%',
  },
  ':active': {
    backgroundColor: 'rgba(201, 200, 200, 0.5)',
    backgroundSize: '100%',
    transition: 'background 0s',
  },
});

const IconButton = styled.div({
  ':active': {
    animation: `${shrinkAnimation} .25s ease forwards`,
  },
});

export default function(props: Props) {
  return (

const Container = styled.div({
  width: '100%',
  height: '100%',
  overflow: 'hidden',
  background:
    'linear-gradient(-90deg,rgba(0,0,0,.02) 1px,transparent 0),linear-gradient(rgba(0,0,0,.02) 1px,transparent 0),linear-gradient(-90deg,rgba(0,0,0,.03) 1px,transparent 0),linear-gradient(rgba(0,0,0,.03) 1px,transparent 0)',
  backgroundSize:
    '10px 10px,10px 10px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px',
});

const LabelContainer = styled.div({
  display: 'flex',
});

const IconButton = styled.div({
  position: 'relative',
  left: 5,
  top: -8,
  background: colors.white,
});

type TreeData = Array<{
  identifier: string,
  name: string,
  parent: string | '',
  didTriggerStateUpdate?: boolean,
  isReused?: boolean,
  isDirty?: boolean,
  inserted?: boolean,
  removed?: boolean,
  updated?: boolean,

paddingRight: 5,
  background: colors.white,
  display: 'inline-block',
});

const Container = styled.div({
  width: '100%',
  height: '100%',
  overflow: 'hidden',
  background:
    'linear-gradient(-90deg,rgba(0,0,0,.02) 1px,transparent 0),linear-gradient(rgba(0,0,0,.02) 1px,transparent 0),linear-gradient(-90deg,rgba(0,0,0,.03) 1px,transparent 0),linear-gradient(rgba(0,0,0,.03) 1px,transparent 0)',
  backgroundSize:
    '10px 10px,10px 10px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px',
});

const LabelContainer = styled.div({
  display: 'flex',
});

const IconButton = styled.div({
  position: 'relative',
  left: 5,
  top: -8,
  background: colors.white,
});

type TreeData = Array<{
  identifier: string,
  name: string,
  parent: string | '',
  didTriggerStateUpdate?: boolean,
  isReused?: boolean,

return rows.length > 0 ? (
      
    ) : null;
  }
}

const BodyContainer = styled.div({
  paddingTop: 10,
  paddingBottom: 20,
});

type BodyFormatter = {
  formatRequest?: (request: Request) => any;
  formatResponse?: (request: Request, response: Response) => any;
};

class RequestBodyInspector extends Component<{
  request: Request;
  formattedText: boolean;
}> {
  render() {
    const {request, formattedText} = this.props;
    const bodyFormatters = formattedText ? TextBodyFormatters : BodyFormatters;