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.
Related
I would like to have an input select with a choice of image as an option (would define a custom icon). I can put an image or an icon with Font awesome.
I tried putting
<select>
<option><i class='fas fa-shopping-bag'/></option>
<select>
or replace with an image but nothing work.
Font Awesome font is well imported, I tried with unicode it does not work either
Do you know how to do it ?
Thanks
if you are using reactjs you need to use className instead of class https://reactjs.org/docs/faq-styling.html
The requirement is I have label eg: Color and value eg: orange.
So I want to show label as tooltip and value as chip. Is it possible to do with chip? if not is there any other way that I can achieve this.
I am using material-ui version v0.18.7.
The easiest way to get a basic tooltip is to use the title attribute:
<Chip title="Color">
Orange
</Chip>
If you want a more powerful tooltip, you can use the Tooltip component added material-ui v1. That will let you have more control over the placement and appearance of the tooltip.
I have a Popover menu with material-ui and I have noticed that in default mode the library puts a layer to capture outside clicks to close the menu. I was wondering is there a way to change the background color or assign a class to this layer to give it some style?
Thanks
I don't see any possibilities in v0.19.3 (Popover.js component), but looks like the new version (they are currently working on, still in beta) will have such possibility:
<Popover
backdropInvisible={false}
backdropClassName="MyBackDropClass"
...
>
...
</Popover>
Also it looks like it will be possible to provide your own backdrop component or provide transition delay.
If the project you're working on can rely on beta version of material-ui, just test it out:
npm install material-ui#next
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle
This question is specific to Adobe CQ5, so ExtJS answers by themselves won't be that helpful.
I have a custom text component with a menu option to change the background color. We're referencing a colorfield component in our dialog.xml, and so far everything works. The color menu appears with the default set of colors in the palette and can be clicked. So far so good.
I would now like to customize the palette and only show a select set of colors specific to our client. How do I achieve this?
Here's the relevant dialog.xml snippet so far:
<bgcolor
jcr:primaryType="cq:Widget"
fieldLabel="Background color"
name="./bgColor"
showHexValue="true"
xtype="colorfield"/>
For future reference, you could probably get by creating a custom ColorField to call a custom ColorMenu which sets a custom ColorPalette. If ColorField had configurable options, these would probably be mentioned in the Ext docs or found in the JS file itself in /libs/cq/ui/widgets/..
Found it on dev.day.com - http://dev.day.com/content/kb/home/cq5/Development/HowToCreateCustomClientLib.html
Simply put, override the ExtJS widget with your own. Not ideal but it'll do.