title: Loading .css file from inside a component in React
body: <p>I have a component that determines the location of the desired .css file via an ajax call in <code>componentDidMount()</code>, that I want to then load before render. I've tried just adding a <code>&lt;link&gt;</code> element in the render return (didnt work), I've also tried directly injecting the  tag into the head using vanilla JS, but this also didnt work: </p>
  
  <pre><code>async componentDidMount() {
      await this.fetchPanelInfo().then(result =&gt; {
          console.log(this.state);
  
          const link = document.createElement("link");
          link.href= this.state.stylePath;
          link.rel = "stylesheet";
          link.type="text/css";
          document.head.appendChild(link);
          //const style = document.getElementById("style-direction");
          //style.href = this.state.stylePath;
      })
  }
  </code></pre>
  
  <p>The shortened component:</p>
  
  <pre><code>class Panel extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          token: "f0be0f7d231305a832fd1eef4bcb0e9ba18f2d65",
          error: null,
          errmsg: null,
  
          menuContent: null,
          stylePath: null,
          services: null,
  
          loading: true
      }
      isLoggedIn().then(logged =&gt; {
          //Nothing for now
      })
  }
  //Gets all information about the panel
  async fetchPanelInfo() {
      await axios({
          method: 'post',
          url: `${ENDPOINT}`,
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          },
          data: this.state
      }).then(result =&gt; {
          console.log(result.data);
          this.setState({
              error: result.data.error,
              menuContent: result.data.menu,
              stylePath: result.data.stylePath,
              services: result.data.services,
              loading: false
          });
      }).catch(err =&gt; {
          console.log("error");
          console.log(err);
          this.setState({error: err.error})
      });
  }
  
  async componentDidMount() {
      await this.fetchPanelInfo().then(result =&gt; {
          console.log(this.state);
  
          const link = document.createElement("link");
          link.href= this.state.stylePath;
          link.rel = "stylesheet";
          link.type="text/css";
          document.head.appendChild(link);
          //const style = document.getElementById("style-direction");
          //style.href = this.state.stylePath;
      })
  }
  
  render() {
      if(this.state.loading) return null;
      return (
          &lt;section className="panel"&gt;
  
              &lt;p&gt;Hello&lt;/p&gt;
              &lt;Menu items={this.state.menuContent} /&gt;
          &lt;/section&gt;
      );
  }
  }
  </code></pre>
  
  <p>This is a page that <code>&lt;Router&gt;</code> navigates to, so I cant explicitly pre-fetch the name of the stylesheet and import separately, because the stylesheet loaded depends on the supplied token (i.e., it varies from token to token).</p>
  
  <p>Any ideas?</p>