React - How to handle sub component CSS changes

Hi I am just finishing the Markdown Previewer challenge, which is the last I have to do as part of the Front End Library challenges and I came across a dilemma. As the challenge is not that extensive, I am trying to implement a few extra features like the ability to change font/font size in the editor. The structure of my app goes:

<Editor various props/>
<Previewer various props/>

I am following the single source of state principle, with my app containing all the state data and both the Editor and Previewer as functional stateless components. Therefore I have to pass the Editor component the font data and the methods to change them as props. Here is my dilemma: is it okay to have these methods (in the app) include the font details as part of the state, or is there a better way of doing this.

Note: None of this font changing code has been implemented so there is no link to share.

If it doesn’t need to be available to the rest of the app, put the state as close where it’s used as possible, otherwise you’re complicating things for no benefit. Having a big global blob of state is an antipattern in almost all cases.

Doesn’t this contradict the ‘single source of state’ pattern though?

Globals are generally thought of as a huge antipattern, for a variety of reasons. There are good arguments to be made for putting the entirety of the state in a single place (this is what Elm does), but there need to be extremely strict contractual guarantees about how you interact with that state (hence why the version of the Elm architecture that is most common in React world, Redux, needs an extremely specific set of boilerplate to be used)