Как переопределить CSS компонента React с помощью CSS эмоций?

В приведенном ниже примере, как применить background-color:green к компоненту <Test/> без непосредственного редактирования компонента <Test/>?

/** @jsx jsx */
import { css, jsx } from "@emotion/core";
import React from "react";


function Test() {
    return (
        <div
            css={css`
                height: 100px;
                width: 100px;
                background-color: aqua;
            `}
        >
            Text
        </div>
    );
}

function App() {
    return (
        <Test
            css={css`
                height: 400px;
                width: 400px;
                background-color: green;
            `}
        />
    );
}

reactjs css emotion
person Greg    schedule 27.04.2020    source источник
comment
В фоновом режиме эмоция использует свойство className. Если ваш Test-компонент не принимает className, эмоция не может изменить свой стиль.   -  person CerebralFart    schedule 27.04.2020
comment
Извините, я не уверен, что понимаю, о чем вы? Как указать аргумент classname внутри function Test( {classname} )?   -  person Greg    schedule 27.04.2020
comment
Да, см. Ответ Денниса ниже для реализации   -  person CerebralFart    schedule 27.04.2020
comment
Другой шаблон, который следует принять, - это передача свойств дочернему компоненту.   -  person wentjun    schedule 27.04.2020

Ответы (1)


arrow_upward
2
arrow_downward

Test должен использовать className опору, сгенерированную библиотекой css-in-js (в данном случае эмоция):

function Test({ className }) {
  return (
    <div
      className={className}
      css={css`
        height: 100px;
        width: 100px;
        background-color: aqua;
      `}
    >
      Text
    </div>
  );
}

Следовательно:

// Will use the styling defined in `Test` component (default)
<Text/>

// Will use the defined styling and override the default when possible, 
// or add additional styling.
// i.e using background-color will override it
// using background-border will *add* a style
<Text css={...}/>

// Same as above, usually used with 3rd party css.
<Text className="someOtherCss" />
person Dennis Vash    schedule 27.04.2020
comment
Означает ли это, что Test можно вызывать с помощью <Test/>? Или следует указать classname, например <Test className="testComponent"/> - person Greg; 27.04.2020