I need to dynamically style the draftjs editor container (basically I need to dynamically apply font sizes to the container, as the font sizes are in percentages). Normally, dynamic styling in react is done by applying styles to the component, but for draftJS, styling the component itself doesn't work and you need to use css to style the .DraftEditor-editorContainerclass.
Is it possible to dynamically style the .DraftEditor-editorContainer while adhering to React principles? I could easily do the dynamic styling with jQuery, but from what I understand this is a horrible practice and should never be done. Is there no other way?
Related
I'm trying react-sticky-table third party library. It is not accepted CSS or styles. but some styling or CSS elements work react-sticky-table. it is not accepting the styling fully
I want to fully access the CSS and styling properties and elements in react-sticky-table.
So how to solve it?
If you have any other solution, please refer to it here.
package link:
https://www.npmjs.com/package/react-sticky-table
demo link
https://henrybuilt.github.io/react-sticky-table/?path=/story/basic--basic
I faced CSS or SASS styling is not working in react sticky table. Actually react sticky table works perfectly. If you using css / sass modules in your react app, you need to access global style of react stick table.
How to access global style? you may use :global pseudo selector, You will be achieved the global styles in css / sass module.
If you use normal css / sass (without module) , you don't need to specify the :global pseudo-selector. Because normal css / sass is global style.
Otherwise we can achieve inline css styles
I am using TinyMCE 5 for my React project. I want to customize the editor and I want to do things like for eg: editing border property or adding box shadow to toolbar. I tried adding css using content_css property but it isn't working. Is there any other work around for it?
edit:
Here's how I want it to look like in the end
here
I was able to add custom icons. Only problem I'm facing is modifying the css. I want to bring the toolbar down, add shadow effect, make icons little smaller and reduce the width of the toolbar. I also tried using styled-components to override CSS but it didn't work. Is there any alternative to override CSS?
You can bring the toolbar down using toolbar_location: "bottom".
Regarding CSS, you can override the default CSS with your own styles using content_css. For example:
content_css: "/mycontent.css";
Or you can override specific parts of it using content_style. For example:
content_style: "body { font-family: Arial; }";
Also see:
Customizing the TinyMCE toolbar
content_css & content_style
I have multiple css files like bootstrap, normalize and custom.
When I try to change the background image by jquery, it inserts the css value in bootstrap.css rather than my custom css.
Is there any way to select a specific file where jquery can make changes?
My css load order is:
1 bootstrap.css
2 normalize.css
3 my own custon css
Thanks
Styles added with jQuery will be inline. This will take a higher precedence than any external stylesheets.
It sounds like you probably have the CSS loading in the right order. What should happen is the browser will apply styles from Bootstrap, then apply Normalize, then apply your custom styles, then any inline styles.
In React, Can somebody explain me, for CSS Pseudo classes (eg. hover,focus,active etc), why I have to go for state changes in react ? why not react developers
kept that style like we do in CSS?
The example which you are referring on https://jsfiddle.net/rz2t224t/2 shows handling specific events on the HTML element.
return React.createElement(
"button",
{onMouseOver: this.mouseOver, onMouseOut: this.mouseOut},
label
);
With above code when onMouseOver and onMouseOut event occur on the button then mouseOver and mouseOut function will be executed respectively.
We can use CSS with reactjs normally as we do.
For example of hover : https://jsfiddle.net/balaji_mitkari/69z2wepo/68520/
You have to use .css to achieve what you are after, you can't do it with inline styles:
from https://medium.com/#jviereck/modularise-css-the-react-way-1e817b317b04#.gwcfeppld
CSS pseudo classes and media queries are not supported: Using inline styles doesn’t give you the full expressiveness compared to writing normal CSS: In particular, there is no way to express CSS selectors for pseudo classes like .notification:hover or .notification:before. Also, it is not possible to use media queries to adapt the styling based on view medium (e.g. adjust the content to look different when viewed on mobile vs. on desktop). Libraries like Radium offer a way to work around these limitations but have to do a nasty tricks to get there.
I've been trying to figure out a way to style individual panels or gui's using Dat.gui.
What is the best way to do this? I could search for panel names in the DOM then apply the style but it seems like an overly complicated solution.
From the looks of this example you could use the CSS selector .dg.main to start, that is the panel container element.
You could use CSS to style the elements, or jQuery or similar to manipulate the DOM.