React - inline CSS on React with emotion react plugin

Question

To use, please npm i the emotion plugin, and add the dependency on the head

import { css, jsx } from '@emotion/react';

 

Example of use

{agencyLogo && (
  <div
    css={css`
      display: inline-block;
      width: auto;
      margin-top: 8px;
      border-radius: 5px;
      overflow: hidden;
      padding: 0;
    `}
  >
    <img
      css={css`
        margin: 0 auto;
        height: 40px;
      `}
      src={agencyLogo}
      alt={agencyName}
    />
  </div>
)}

 

To check, do inspect element on specific div. e.g

<div class="css-16ruk4q-Agentlogo"><img src="assets/logo.pg"/></div>