My problem is that CK Editor is detecting and adding css classes from my main style sheet (in the parent page), which is causing the Styles combo to display unnecessary and undesirable styles in a very long list.
I want to remove the styles that are being automatically added to the stylescombo.
I want CK Editor to ONLY display the styles I define in the config and none of the default or parent styles.
I have tried various techniques from the docs and from S.O., but it does not seem to work.
CKEDITOR.editorConfig = function (config) {
// I thought this is how you use the stylescombo plugin but it does nothing
config.stylesSet = 'custom:/ckeditor/styles.js';
config.stylesCombo_stylesSet = 'custom:/ckeditor/styles.js';
//I want only this style to display in the Styles combo.
//This does get added, but with all the other junk styles I do not want.
config.stylesSet = [
{ name: 'Bolder', element: 'span', attributes: { style: 'font-weight:bolder'} }
];
};
I am using CK Editor 4 and the stylescombo plugin.
Apparently you mistakenly included stylesheetparser plugin in your build so this may help:
config.removePlugins = 'stylesheetparser';
Or you can build a new CKEditor package without this plugin.
Related
According to TailwindCSS Docs, you can specify color mode by document.body.addClass('dark') and use it on your CSS classnames like dark:text-blue-500.
But there is no option for adding new color modes, i want something like evening, midnight. Any ideas how to implement different color modes without going too much into it?
The most logical way i can think is create a ColorModeContext and export my components according to context but it is kinda hardcoded.
Tailwind 3.1 now includes arbitrary variants which, along with the addVariant plugin, can be used to create custom color modes. Using the css * selector, you can apply a class like evening to an element, and all its children will have apply evening: ... styles.
tailwind.config.js
let plugin = require("tailwindcss/plugin")
module.exports = {
// ...
plugins: [
plugin(function ({ addVariant }) {
addVariant('evening', '.evening *')
addVariant('midnight', '.midnight *')
})
]
}
pages/[some-page].jsx
<div className="evening">
<div className="text-blue-300 evening:text-blue-500"></div>
</div>
Is it possible for the filter property, applied to a styles object in React to have multiple filter values set?
saturation = 25;
blurAmount = 5;
brightness = 25;
opacity = 0.85;
let styles = {
backgroundImage: `url(${imageUrl})`,
WebkitFilter: `brightness(${brightness}%) saturation(${saturation}%) blur(${blurAmount}px)`,
filter: `brightness(${brightness}%) saturation(${saturation}%) blur(${blurAmount}px)`,
opacity: opacity
};
In the code above, only the opacity and backgroundImage properties get set correctly when I add the inline style to my component.
React does not support all the CSS properties so my best suggestion is you can use 3rd party library like this one https://github.com/iyegoroff/react-native-color-matrix-image-filters#supported-filters
checkout this lib I think this will help you.
I a solution I found was to give the element an ID, and set the ID to something that's associated with the color.
Example:
<img id={Log.serv} src="RadioWaves.png"/>
Log is a variable, that has dynamic input. Serv being severity (the color).
Now what you can do is on a CSS sheet, you can apply the filter to elements that have that ID.
Example:
#AllSystemsGo{
filter: invert(95%) sepia(79%) saturate(992%) hue-rotate(33deg) brightness(103%) contrast(98%);
}
You could substitute an ID with a separate classname, either way, works. I did not want to install a separate lib, so this what I came up with.
I have the default Reactify Material UI DataTable that looks like this image
I need to heavily customise it including removing the download and print functionality and add icons into the columns for status and a drop-down added into the actions column. I have been thrown in the deep end with this project and would like to know where to start. I am using Reactify and I am slowly getting used to React so just need direction on what to research and what to learn.
Do I duplicate the mui-datatables node module and start modifying that?
Thanks
You can customized it, just read the docs very carefully.
https://www.npmjs.com/package/mui-datatables
This is the link where you can find its docs and make your data tables customize, for example if you want to remove the download and print functionality you just give false values to download and print option like this
const options = {
print: false,
download: false,
};
You can add icons in the status just change the value in data array. for example
let icon = <i className="ti-close" />
const data = [
["UserName_Value", "Title_Value", icon , "Date_Value", "Action_Value"],
];
Similarly you can add dropdowns to the action columns as well, just read the docs carefully and you will get the answer.
Its been 2 whole days i can't find any solutions.I have no solutions yets:( I'm having color states. I'll select from color picker a color, I'll update that particular color state:
Requirement is if I pick from color picker it must be passed from react js property or variables to scss variable n override them. it must be done via reacrjs to scss if it can be done from js to css then it can be done from reacr js to scss whats that one thing which m missing on it.
App.js
{
primary: '#1976D2',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
}
ex: primary: '#1976D2' I'll pick in update to primary: '#ffffff' something like:
App.js
changeColor(e){
this.setState({primary:e.target.value}) // the value is updated to #ffffff
}
Now, I need to pass this.props.primary to .scss something like:
variables.scss
$primary:this.props.primary
login.scss
.btn{
background-color:$primary
}
my need is it must be dynamic if i pick from color picker it must be passed from react js property or variables to scss variable n override them
We can do it inline styling but I wanna do it the way defined above (via .scss).
Is it possible?or is the any better way?
something like this
https://vuetifyjs.com/en/style/theme
vuejs uses theme thats overides to scss variables
Vue.use(Vuetify, {
theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
}
})
can anyone please explain me how they r doing I'm not understanding
First. Just to clarify. You are not able to change SASS variables from browser. Because how it works: SASS code -> compiled into CSS -> CSS is sent from server to browser -> . So we actually should searching "how to override by JS something that was SASS variable in consistent way".
The only way I see doing that is using CSS custom properties. Take a look into spec to understand their caveats(e.g. it cannot be used as part of size value in #media) and about support in browsers.
I'm not really sure if SASS supports compiling variables into CSS custom properties. Take a look into css-vars mixin. With using
$css-vars-use-native: true;
you will get your variables exported as CSS custom properties. Unfortunately it means you need to change you existing styles to use var() from mixin for variables you want being able to override later
Then your code will be able to override any of custom properties as easy as
document.body.style.setProperty('--primaryColor', myColorValueFromDatePicker)
Take a look into fine and short article on how to change custom properties with JS
NB since custom properties uses the same cascade approach as any CSS you additional get ability to apply changed value on any part of DOM:
document.querySelector('#previewBlock').style.setProperty(....);
I would use Styled Components instead. There you can pass your styling by props
https://www.styled-components.com/docs/advanced
Is there anyway to use Emmet expansion for styles in RN project in WebStorm? Just like normal CSS.
Now when I'm styling a component and try to use Tab for a style in JSX file it only create a dummy HTML element instead of CSS.
For example:
button: {
df \\here I click tab for "display:'flex'"
}
The result will be:
button: {
<df></df>
}
While the preferred result is:
button: {
display: 'flex'
}
I googled widely but didn't find any solution neither any complains, is it only me suffering for writing everything by hand instead of using tab?