Can `customStyleMap` specify a CSS class so the style can be managed in a CSS file?
See original GitHub issueStyles defined in customStyleMap
are specified in JavaScript objects. I was wondering if there’s a way to specify a CSS class name instead of the hardcoded JS-based styles and have my styles managed in a separate CSS file (or LESS/Sass/Stylus/etc…). Is that possible?
Issue Analytics
- State:
- Created 7 years ago
- Reactions:14
- Comments:10 (5 by maintainers)
Top Results From Across the Web
CSS Class Selectors: How to Use to Style an HTML Element
Do you want to stylize HTML elements without hassle? CSS classes will help you do the job! Here, you'll learn how to use...
Read more >How To Apply CSS Styles to HTML with Cascade and Specificity
In this first step, you will apply styles to an HTML element directly with the style attribute. This method, also known as inline...
Read more >Complex Inline Styles - Draft.js
Within the Draft model, inline styles are represented at the character level, using an immutable OrderedSet to define the list of styles to ......
Read more >Organizing your CSS - Learn web development | MDN
After this section, we could define a few utility classes, for example, a class that removes the default list style for lists we're...
Read more >Styles and classes - The Modern JavaScript Tutorial
JavaScript can modify both classes and style properties. ... icon – describe that in CSS and then add the class (JavaScript can do...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This is really hacky but you could (ab)use CSS selectors on the
style
attribute to make this work without any changes in Draft.js. Here’s an example:Two things:
*=
attribute selector, because if there are multiple styles applied to the same text they will all be defined in the same element’sstyle
attribute.Small demo GIF:
We are currently running into a huge need for this. Our issue being
font-size
andline-height
need to scale happily via media queries; a user chooses a font size of “5” and the output results in something that’s sensible in desktop and mobile relative to the rest of the content. We have a fairly strict requirement for this type of behavior and maybe it’s just late and I’m jumping towards desperation, but I’m completely failing to find another elegant way to do this without acustomClassMap
orcustomClassFn
-like addition.I wonder if there’s a reason the draft team has chosen to only concentrate on inline styles. It makes me wonder if it just goes against how they see draft being used and implemented?
I’m thinking about making a PR for this, though I suspect with how swamped the team is, we’d be waiting for a while on merge (which isn’t a problem in itself, but if there’s a good chance it’ll never be merged, that’s an actual problem, because I can’t justify forking draft long term). Looks like it’s a fairly trivial add, at least.