I am using Mui for styling a website I am working on. I was wondering if anyone had any insight on how to style a radio button so it is completely filled with one color while selected. This has to work with Mui Radio buttons.
Let me provide an example of how it should look.
I want it to look like the first radio button. It currently looks like the 4th in Mui.
I am also needing to do this with styled components.
You can change the default icon by providing a different icon in the checkedIcon props (You can use Lens icon to achieve the first button). There are other icons as well at here. Pick the one you need
import Lens from "#material-ui/icons/Lens
return (
<Radio
value="example"
label="example"
checkedIcon={<Lens></Lens>}
/>
)
Related
I want to apply different styles to antd pop overs when they are in different components, especially the positions where they appear. For example if I have a button and b button, I want to make a pop over appear 50px right of a button and the other appear 100px left of b button. I have no clue to do this because it seems I can not add a className in antd pop over component such as antd-popover-title, antd-popover-content, and so on. Please let me know if you have any ideas..
The Popover class has the same API as Tooltip. https://ant.design/components/tooltip/#API
In there you may find multiple ways to style the popover how you want. With either overlayClassName, overlayStyle, overlayInnerStyle.
https://codesandbox.io/s/exciting-fermat-izfv8?file=/index.js
Is it possible to add an image to a radio button when it's selected/checked to true using CSS only ?
For Example
I have three radio buttons and when I select any one of them I want to add an image with a check icon
I know it can be done with JavaScript and jQuery, but I want to know if this can be done with CSS only, I have tried doing it different ways with CSS but didn't work.
I have trouble with styling DevExtreme React Grid, follow by there found from there documentation here.
Here's the sample code I have from copy some other repo.
My questions:
How can I get full control on the styling, because I see <Table>component, but is there a way I can adding class to <th>, <td>, I would like to add the class or someway to have full control styling for font size, or hover styling.
I had a really hard time my table header, like to change to bold and another background color, it's by material UI
After I add the Fixed Columns method on scrolling my table, the style is not matching with my other table row, it's changed to all white background, no grey and white on each row
When I hit the rest, I would like to row change to be another color.
Thank you so much for your help!
I checked with their GitHub issues:
Not fully support adding class to the component, but you can create a theme for it.
About fixColumn styling found the demo from this sandbox. Hope this sample help
Pagination issue with sorting can be fixed by this:
//after state area:
changePageSize = pageSize => this.setState({ pageSize });
// Plugin
<PagingState
defaultCurrentPage={0}
pageSizes={pageSizes}
defaultPageSize={15}
onPageSizeChange={this.changePageSize}
/>
<IntegratedPaging />
//UI
<PagingPanel pageSizes={pageSizes} />
I want to apply styles on input type=file's upload button to make it attractive as like bootstrap buttons. Is there any way to apply styles on this button. Is there any support for it in bootstrap ?
The common solution would be give your input[file] a opacity:0 and postion:absolute(make sure the parent element has position:relative), then let it appear on your normal bootstrap button.
See this demo I create for you.
I was able to set the text color of a selected LinkBar button by "disabledColor" style of LinkBar. Accordingly, I expect to set the background color of the selected button by "backgroundDisabledColor" style, however, it didn't work; and except "backgroundDisabledColor", I didn't see any other style that could possibly achieve this. Please help. Thanks.
The problem is probably that you're setting the style on the LinkBar itself - try setting the LinkBar's linkButtonStyleName style to a different style selector that contains all of the styles you need for your button. You should be able to set the fillColors style of the buttons themselves there - this will change the default look of the button.
If you need to adjust the "selected" color or if you need something more advanced than just skinning the button background you'll need to write a custom skin class. This isn't too difficult - the Button class has a whole set of "Selected" styles - selectedDownSkin, selectedUpSkin, selectedDisabledSkin, etc. IMO the best practice is to set your button skin to a custom skin class that sets the different individual styles based on state.
David Flately illustrates this method here. Check out his source - that should get you what you need. A good book on this topic that has this sort of thing along with lots of other examples is Juan Sanchez and Andy McIntosh's Creating Visual Experiences with Flex 3.0. I can't post a link to it because my reputation isn't high enough here yet, but you can find it on amazon or barnes and noble or any other online bookstore.
FYI - answer here....
http://dezeloper.wordpress.com/2010/02/24/flex-css-linkbar-togglebuttonbar-selected-text-color/
Haha, was looking for same thing, you can see on the source code of LinkBar:
// Hilite the new selection.
child = Button(getChildAt(selectedIndex));
child.enabled = false;
Which is clever!!! Rather than set selected to true, they disable the selected button ... why not ;-( Took me half an hour to understand the Flex team logical ...
eBuildy, Flex Specialists