React emotion - CSS class execution in emotion

Question

const listPrice = css`
  h4 {
    background: ${accentColor};
    color: #ffffff;
    border-radius: 5px;
    width: 147px;
    padding: 6px 13px;
  }
`;

<div css={listPrice}>
    <h4>{accounting.formatMoney(price, 'RM ', 0)}</h4>
</div>

 

Answer 1

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

<div
  css={css`
    width: 300px;
    padding: 16px;
    border: 1px solid #000;
  `}
>

 

Answer 2

import React from 'react';
import { css } from '@emotion/react';

const ColTest = () => {
  const containerStyles = css`
    display: flex;
    flex-direction: row; /* Change to row */
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
  `;

  const buttonStyles = css`
    width: 20%;
  `;

  const inputStyles = css`
    width: 80%;
  `;

  return (
    <div css={containerStyles}>
      <button css={buttonStyles}>New Topic</button>
      <input
        type="text"
        css={inputStyles}
        placeholder="Enter your topic..."
      />
    </div>
  );
};

export default ColTest;