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?
Related
I am using Material-UI in my react application. Recently, I updated my packages to the latest version. Now, when I open a dialog in my application, padding-right: 17px; will be added to the body tag.
I also checked the Material-UI site, and this is happening on their website too with dialogs.
Is this a bug with the new version of Material-UI?
How can I remove this padding from the body tag when opening a dialog?
Update: This padding will be added to the body tag with Drawer, Menu, Dialog, and Popover components.
as it was mentioned by #Reins you can use disableScrollLock property. The thing is sometimes this property is nested on components's input so you need to use inputProps in order to set it. Here is an example with Select component:
<Select
className={classes.select}
inputProps={{MenuProps: {disableScrollLock: true}}}
...
/>
Sometimes you may want to dig into MUI codebase in order to figure out how to apply some nested element's properties.
Just give disableScrollLock={ true }.
I think it will solve the issue because I had the same.
I added disableScrollLock prop to my Dialog Component.
It worked.
You can use a mui-fixed class for handling this issue, it's helpful for me.
Here is a link for material UI mui-fixed document :
https://material-ui.com/getting-started/faq/#why-do-the-fixed-positioned-elements-move-when-a-modal-is-opened
Hope this will help anyone.
For me the solution was to add
overflow: auto;
to the #root selector:
#root {
... other css that was there before
overflow: auto;
}
I add in my main css file the following snippet of code and I get rid of body margins:
body {
margin: 0;
}
I realized this came from a parent Container. I just added this and it worked for me. Also realized this is adaptive to screen size, so this code is applied to all the sizes from xs and up breakpoints.
sx={{
[theme.breakpoints.up("xs")]: {
padding: 0
},
}}
Here we go again. Let's see if you can decipher the riddle :D. So, the problem is the following. I have an external css file. I putted some 'specs' inside this file. I downloaded a plugin that make possible to link external css files into js files. So, in that way I can 'stylize' the JSX syntax inside that files. Everything ran great, but a problem appeared. If I declare a 'className' inside an element and I try to manipulate the properties of this element, nothing happens. But if I "call" the element by name( example: div {...} or footer{...} ) into the css file , the manipulation happens.
This is the code inside the JSX syntax:
<div className = "userlog_wrapper">.....</div>
..and this is the code inside the css file:
.userlog_wrapper{
width: 100%;
height: 660px;
}
Ok, I fixed it. The solution is the following......if you are using the nextjs plugin for css click on me .You need to write this inside the js file:
import css from ../wherever/the/file/are
and then, next to the className put this '= {css.nameOftheClass}'.
That's all, it should work.
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
I have quick suggestions and emmet enabled for javascript babel files.
I'd like it so that when a quick suggestion is made e.g. when I type V in the context below for it to select View - not for emmet to expand it into a jsx tag e.g. <View />
import { View } from 'react-native'
I would, however, like emmet to keep doing so for jsx tags that are scoped to a set of round braces e.g.
return (
View // expands to: <View />
)
You can currently do this in sublime text by using a package called Scope Selector which exposes meta values like: meta.group.braces.round.js given a selection. I can then use this value as a context for a keybinding.
When I inspect the scope in VSCode however, there doesn't seem to be anything specific that I could use in the when clause of emmet's Expand Abbreviation keybinding:
Can anyone shed some light on how I may go about doing this - if it's possible. Thanks.
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.