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

Question

我想将外部CSS应用于带有链接标签的react组件。 但是，当我将组件包含在另一个项目中时，css也将应用于父项目，这是正常的。

如何避免这种情况？我希望将“父css”应用于该组件，但是由于该组件是延迟加载的，因此css不会在其上做任何事情。

Answer 1

我发现在反应中使用样式来避免此类问题的最佳方法是使用styled-components（github上有23k颗星）

样式化组件用法示例：

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配置进行编辑。

在样式化组件中导入现有样式的另一种方法

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

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: Load component's CSS only when component is rendered