如何使用情感CSS覆盖React组件的CSS？

Greg 发表于 Dev

格雷格

在下面的例子中，如何应用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;
            `}
        />
    );
}

丹尼斯瓦什

Test必须使用className由css-in-js库生成的prop（在这种情况下为情感）：

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" />

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。