How to use the emotion.cx function in emotion

export const FieldValidationMessage: React.FC = ({ children, className }) => {
  const theme = useTheme();
  const styles = getFieldValidationMessageStyles(theme);

  return (
    <div>
      <i>
      {children}
    </i></div><i>
  );
};
</i>

{Object.keys(components).map(label => (
              
                Loading...}>
                  {components[label]}
                
              
            ))}

return null;
    }

    const social = (
      
        {socialSettings.instagramUsername && (
          <a href="{`$https://instagram.com/${socialSettings.instagramUsername}`}">
            <span>Instagram</span>
          </a>
        )}
        {socialSettings.twitterUsername &amp;&amp; (
          <a href="{`https://twitter.com/${socialSettings.twitterUsername}`}">
            <span>Twitter</span>
          </a>
        )}
        {socialSettings.facebookUrl &amp;&amp; (
          <a href="{socialSettings.facebookUrl}">
            <span>Facebook</span>
          </a>
        )}
      
    );

    return (
      
        <div></div>

const ComplexItem = props => (
  <div>
    <div>
      <img alt="placeholder" src="http://placehold.it/24x24">
    </div>
    <div>
      <p>{props.title}</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit
        pretium felis ac accumsan.
      </p>
    </div>
  </div>
);

const ComplexItem = props => (
  <div>
    <div>
      <img alt="placeholder" src="http://placehold.it/24x24">
    </div>
    <div>
      <p>{props.title}</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit
        pretium felis ac accumsan.
      </p>
    </div>
  </div>
);

render() {
    const { label, value, locked, lockMessage, inputType } = this.props;
    const labelClass = cx(
      'width-16',
      css`
        font-weight: 500;
      `
    );
    const editButtonContainerClass = cx('pull-right');

    if (locked) {
      return ;
    }

    return (
      
        {label}
        
          {this.state.editing ? (

{({ getValidationErrors, getHintContent, isValid, describedByIds }) => (
          
            <div>
              {this.getIconStartContent()}
              {this.props.badges &amp;&amp;
                this.props.badges.map(badge =&gt; (
                  <span>
                    
                      
                        </span></div>

const parseResponsiveStyle = (
  property: CSSPropertyKeys,
  value?: ResponsiveValues
) => {
  if (value === undefined || value === "" || value === null) {
    return;
  }

  if (typeof value === "object") {
    return cx(
      Object.keys(value).reduce((acc, breakpoint) => {
        acc.push(
          css`
            ${atMediaUp[breakpoint](css`
              ${property}: ${value[breakpoint]};
            `)};
          `
        );
        return acc;
      }, Array())
    );
  } else {
    return css`
      ${property}: ${value};
    `;
  }

const Comments = props => {
  const { slug, siteUrl, themeStyle = style, customStyle = '' } = props;

  return (
    <div>
      
        
      
    </div>
  );
};

export const ButtonAppearanceSampleInverted = ({ buttonComponent }) => {
  return (
    <div>
      <div>
        <p>Normal</p>
        {buttonComponent({ children: "Button", isInverse: true })}
      </div>
      <div>
        <p>Disabled</p>
        {buttonComponent({
          children: "Button",
          disabled: true,
          isInverse: true</div></div>