(question) Customized styling for codemirror component

[nikhilshagri]

I want to use the customized styling defined in the Codemirror docs here, but it works by overriding CSS classes in stylesheets. I wanted to know if there is a way to style the component inside React itself.

[0x24a537r9]

I'm not sure exactly what the issue is--styling the inner elements still works exactly as expected. For example, the following still matches and styles the core .CodeMirror element as expected, even though it's inside the React component's .code-mirror element:

.CodeMirror {
  font-family: Tahoma;
}

Are you saying that you want a programmatic way of setting these styles inline instead of using CSS class definitions? If so, why?

[nikhilshagri]

yes, I wanted to know whether it's possible to set the styles in JS itself. the problem I'm facing is that I am using webpack to import stylesheets; and I need different styles for each component, but the import doesn't allow me to do that.

To be clear, when I import different stylesheets in different pages, only one stylesheet gets selected at random, and is then applied to components in all the pages.

[0x24a537r9]

I think the only way to set the styles of a component's child element is to use describe it in a stylesheet or reference the DOM using a ref and find the child underneath.

That said, I'm still not quite understanding your setup or why you need to set the styles with JS. Maybe a bit more specific details about your exact components and file structure would help?

For example, in my project (also using Webpack), I use the react-codemirror component in a HomePage React component. In order to change some styles of CodeMirror element itself, in that component's style.css I just define:

:global .CodeMirror {
  font-family: Inconsolata, monospace;
  font-size: 11pt;
  height: 100%;
}

and (because I'm using a webpack style loader), in my component I do:

import styles from './styles.css';

This seems to work fine for me. Is there a reason you can't similarly define the .CodeMirror class in one of the stylesheets you already have for your component? Or are you saying you need to dynamically change the styles for your CodeMirror instance?

[nikhilshagri]

I use codemirror components on two pages, and I want to set the component's height rule in one of the pages to auto, so that the height of the codemirror component is determined by the lines of code. So I create a stylesheet to apply this style and import it in the required page using an import. But this style is then applied across all pages, even those where I haven't imported the stylesheet.

Note: I am using React with a Rails backend, using the webpack_react_rails gem to make it work. This might be the reason why this problem is occurring, but I'm not exactly sure.

[0x24a537r9]

Yeah, unless I'm am misunderstanding your issue, it sounds like the real problem is that you're using one stylesheet for multiple pages--which is always going to cause problems like this regardless of react-codemirror. It doesn't sound to me like changing react-codemiror is the right move.

Instead I would suggest splitting your stylesheets up into separate page-specific CSS modules. The webpack_react_rails documentation seems to suggest that CSS modules are properly supported. Or, if you're saying you already have and it's just not working as expected ("But this style is then applied across all pages, even those where I haven't imported the stylesheet.") that's an issue you'll need to figure out with webpack_react_rails--it should only be using stylesheets you explicitly import. Otherwise you're going to run into much bigger problems down the line.

[nikhilshagri]

Sorry for the late reply, but I looked into it, and it looks like the problem might actually be because of webpack_react_rails. I'll open an issue on their page shortly.

[lcasoft]

I know this is an old issue but wanted to provide an alternative solution that we've used for our service virtualization tool EkkoProxy where we have many CodeMirror components that needed different sizing etc. meaning we could not use the global css override option (:global .CodeMirror {}) provided elsewhere. As CodeMirror supports using multiple themes we just defined themes with different styles e.g. height in our stylesheet:

.cm-s-readonly {
    background-color: rgba(170, 170, 170, 0.04) !important;  
}
.cm-s-height400 {
    height: 400px !important;
}
.cm-s-height500 {
    height: 500px !important;
}

Then on the CodeMirror tag specify the themes you need:

<CodeMirror options={{
  theme: 'default height500 readonly',
}} />

These styles are then applied to the main CodeMirror div.