使用Emoiton Js为react组件生成多个CSS类

Question

我必须在带有Emotion JS的GatsbyJs项目中使用react-phone-input-2软件包。它可以接收多个className。 如果我通过一些className这样：

import PhoneInput from "react-phone-input-2"
<PhoneInput
inputClass={css`font-size: 24px;`}

我将收到下一个错误：

<input class="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop). form-control" id="phone-form-control" placeholder="1 (702) 123-4567" type="tel" value="+1"> 

对我有用的一件事是使用

中的ClassNames

import { ClassNames } from "@emotion/core"

const phoneNumStyles = `font-size: 24px !important;`
 const errorBorder = `border: 1px solid #FF4757 !important;`

 <ClassNames>
 {({ css }) => (
 <PhoneInput
 inputClass={
 props.errors.phone &&
 props.touched["phone-form-control"]
 ? css([phoneNumStyles, errorBorder])
 : css(phoneNumStyles)
 }

但是问题是我不得不使用!important来权衡我声明的样式；有更好的解决方案吗？