Trix loses CSS upon refresh/reload

[adriennefranke]

I'm running into some weird behavior where if I refresh or reload a page with this Trix React component, the CSS disappears. I've attached screenshots of the behavior in my app. I'm using styled-components and I've attached my code for the component. I've added trix.css to my public folder.

import React from 'react';
import styled from 'styled-components';
import { TrixEditor } from 'react-trix';

export const Wrapper = styled.div`
  width: 690px;
  background: #fff6df;
  border-radius: 6px;
`;

export const TextBox = (props) => {
  return (
    <>
      <Wrapper style={props.style}>
        <TrixEditor
          onChange={props.onChange}
          value={props.value}
          onEditorReady={props.onEditorReady}
        />
      </Wrapper>
    </>
  );
};

Any guidance would be great. Thanks!

[adriennefranke]

Okay I moved the trix.css file to my components folder and imported it directly and this resolved the issue.

import React from 'react';
import styled from 'styled-components';
import { TrixEditor } from 'react-trix';
import './trix.css';

export const Wrapper = styled.div`
  width: 690px;
  background: #fff6df;
  border-radius: 6px;
`;

export const TextBox = (props) => {
  return (
    <>
      <Wrapper style={props.style}>
        <TrixEditor
          onChange={props.onChange}
          value={props.value}
          onEditorReady={props.onEditorReady}
        />
      </Wrapper>
    </>
  );
};

https://create-react-app.dev/docs/adding-a-stylesheet/