For example, this is my BEM style stylus code:
.example
background yellow
.block
background black
&--modify1
background red
&--modify2
background blue
If I want to use .example as classname of my component, I know this code:
<Component classname={style.example}>
But what if I want to use .block--modify1 classname ? What should I do ?
You may use some helpers like https://www.npmjs.com/package/bem-cn
or even try bem-react-core library which does this job automatically.
Related
As i have tried to add custom color but couldn't so now i want to add a custom background color of div
Use style property like following. You can also pass a hexadecimal value like #FFFFFF:
<div style={{backgroundColor: "red"}}><div>
I have applied css to my lightning Button to change the color of it. And I have class named Morning inside my button
.THIS.Morning{
//Mornig is class inside my button
color: red;
}
You might be good with the normal button variant, have you tried it? <lightning:button variant="destructive-text"/>
https://developer.salesforce.com/docs/component-library/bundle/lightning:button/example
You can use normal <button> and style it with Salesforce-defined classes + whatever else you need. Use Lightning Design System: https://www.lightningdesignsystem.com/components/buttons/
If it absolutely has to be a <lightning:button> and variant's aren't enough - look into button "styling hooks". More info:
https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/tokens_standard.htm
Please try this in your CSS :
.THIS .slds-button_brand {
color:red;
}
My CN1 app features a FloatingActionButton. I need to change its background color. My styles are all defined in CSS. So this one is :
FAB {
background-color: #80ccc4;
}
And if I create the FAB like FloatingActionButton.createFAB(FontImage.MATERIAL_POWER_SETTINGS_NEW, "FAB"); it results in a FloatingActionButton with an added "hyphen" on top of it :
On the contrary if I create the FAB without providing a style and then programmatically set the background color like fab.getAllStyles().setBgColor(0x80ccc4); then I get the expected FAB :
So what should I set in the css file to remove this unwanted "hyphen" ?
Any help appreciated!
You are styling FAB and not FloatingActionButton which is the right UIID for that. If you used setUIID that might be problematic on a FAB as the content is set later.
The reason this is happening is a bit of a problem with CSS. We get the background color of the FAB from the RoundBorder but transparency should be 0 for the icon in the center.
Unfortunately in CSS you can't express both a background color and 0 background transparency. I don't think this is solvable in the CSS so I'll add a special case to the FloatingActionButton that should workaround this.
How to configure highlighting of custom/react components in JSX (render block)?
I want to configure editor color for <Home /> component in this example. Is it possible?
No, it's not currently possible.
Related feature requests: WEB-21035, WEB-330
As of PhpStorm 2022.3 Beta (EAP), the highlighting for React components differs from other elements in JSX for most color schemes by default.
This is how it looks in Darcula color scheme that you use:
And this is how it looks in IntelliJ Light color scheme (my preferred scheme):
If you don't like the default color, you can customize it in Settings (Ctrl+Alt+S) > Editor > Color Scheme > XML, select "Custom Tag Name" and change the Foreground color:
If Foreground and other options are disabled, you need to uncheck the "Inherit values from:" checkbox below these options.
I can't figure out how to style the fabric ui component. I just want to change the background of the nav bar to be black with white phone instead of white background and black font. However, this seems to be really difficult with the current component.
There is virtually no documenation on how to style either.
https://dev.office.com/fabric#/components/nav
Thanks,
Derek
css inline not working?
Example:
style={{backgroundColor:'black', color:'white'}}
Regards.