Генерация нескольких css классов для реагирующего компонента с Emoiton Js - PullRequest
Новая
       9

Генерация нескольких css классов для реагирующего компонента с Emoiton Js

1 голос
/ 18 января 2020

Мне пришлось использовать пакет response-phone-input-2 в моем проекте Gatsby Js с Emotion JS. Может получать несколько имен классов. если я передам какое-нибудь имя класса следующим образом: 

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, чтобы придать вес стилям, которые я объявил; Есть ли лучшие решения?

...