加载外部CSS文件只为一个React组件

Question

我想要使用link标签将外部css应用到React组件中。然而，当我将该组件包含在另一个项目中时，css也会应用在父级项目上，这是正常的。

如何避免这种情况？我希望组件能应用“父级css”，但由于组件是懒加载的，css将不会对其产生影响。

- stijn.aerts

Answer 1

我发现在React中使用样式的最佳方法是使用styled-components（在Github上有23k+星）

styled-components使用示例：

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: palevioletred;
  `}
`

render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>

    <Button as={Link} href="/docs" prefetch>
      Documentation
    </Button>
  </div>
)

参考资料：https://www.styled-components.com/

外部 CSS

如果您正在使用外部 CSS，可以使用以下方法进行解析：

import { css } from "styled-components";

// Css loaded as string and passed to css method of styled-components
export const borderBottom = css`
    &:after{
        content: "";
        display: block;
        height: 3px;
        width: 200px;
        background-color: ${props => props.color || "black"};
        /* position */
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
`;

请注意，如果您想将CSS打包为字符串，则可能需要对webpack配置进行编辑。

另一种导入现有样式到styled-components的方法。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Styled from "styled-components";

const fetchStyles = () =>
  fetch(
    "https://gist.githubusercontent.com/bionicvapourboy/61d3d7a8546cb42e0e3194eb9505f48a/raw/5432218dd83320d53d1cbc2f230b81c765183585/style.css"
  ).then(response => response.text());

class App extends Component {
  state = {
    style: ""
  };

  componentDidMount() {
    fetchStyles().then(data => this.setState({ style: data }));
  }

  Wrapper = () => Styled.div`
    ${this.state.style}
  `;
  render() {
    const Wrapper = this.Wrapper();
    return (
      <div className="App">
        <Wrapper>
          <h1>Styled</h1>
        </Wrapper>
        <h1>Not Styled</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/yw7xmx6x3x

- Mosè Raguzzini

---

这完全没有回答问题。 - justdvl

Answer 2

你可以尝试使用这个：

import React from 'react'

let cssLoaded = false;

export default class MyComponent extends React.Component {
    render() {
        if (cssLoaded === false) {
            cssLoaded = true;
            import('./MyComponentStyle.css');
        }

        // other stuff
    }
}

在你的CSS文件中： @import url('example.com/styles.css'); 来源：React: 仅在组件渲染时加载组件的CSS

- ProblemsEverywhere

---

代码在一个单独的存储库中，所以我无法做到这一点。我有项目A，它有自己的CSS文件，并且加载了一个Web组件。我希望将项目A的CSS应用于Web组件。 - stijn.aerts

@stijn.aerts 你不能为你的组件创建一个自定义的 .css 文件吗？ - ProblemsEverywhere