I have a problem trying to remove the bottom border from the default Picker in react-native.
My code:
<Picker
style={styles.pickerStyle}
selectedValue={this.state.registerType}
onValueChange={(item) => this.setState({registerType:item})}>
<Picker.Item label="Vælg emne" value="choose" />
{registerTypes}
</Picker>
On the image below you can see what I want to remove:
I have tried to use the underlineColorAndroid='transparent' properties as you will do in the TextInput tag, but it diden't work. Any suggestions?
Maybe it's not the best way ever, but I found a fast solution that worked fine in my project.
Define a height for <View> and <Picker>, and the container element must be 1px bigger.
Set overflow: "hidden" para o container.
<View style={styles.container}>
<Picker style={styles.picker}>
<Picker.Item value="1" label="Yes" />
<Picker.Item value="2" label="No" />
</Picker>
<View>
container: {
overflow: "hidden",
height: 51
},
picker: {
height: 50
}
I know it was an easy fix, but a part of my design was to change the background color in the Picker and then the border is hidden behind I guess.
Related
I want to add shadow on piechart. I am using recharts library.
Please let me know if you have any solutions.
Thanks.
You can add a drop shadow filter on the Cell component(s) to add this effect. I just passed the values in via the style prop, but you can do whatever works best for you.
<PieChart width={800} height={400}>
<Pie
data={data}
cx={120}
cy={200}
innerRadius={70}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{data.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % COLORS.length]}
style={{
filter: `drop-shadow(0px 0px 5px ${COLORS[index % COLORS.length]}`
}}
stroke="0"
/>
))}
</Pie>
</PieChart>
Working Example CodeSandbox: https://codesandbox.io/s/pie-chart-with-drop-shadow-fxe8x?file=/src/App.tsx
I have a problem in displaying the values from the TextField in my React app.
I'm using material UI and material-ui-phone-number as its packages. As you can see, the values after i click the flag, it is displaying on the back. I believe this is on the zIndex. Pls modify only the dialog2.js
Pls check my codesandbox here
CLICK HERE
Your MuiPhoneNumber utilizes a MUI modal for the country selection & its default z-index is 1300. It does not look like they expose a prop to alter its css properties so you can just target #country-menu (the id of the modal) using any preferred styling solutions
<div>
<style type="text/css">
{`
#country-menu {
z-index: 1801;
}
`}
</style>
<DialogContent style={{ width: 300, height: 500 }}>
<MuiPhoneNumber
name="MobileNo"
label="Mobile No."
variant="outlined"
fullWidth
defaultCountry={"vn"}
value={selectedValue}
onChange={(e) => setSelectedValue(e)}
/>
</DialogContent>
</div>
This can be achieved by doing the following changes:
Remove all CSS z-index defined
Put the Dialog 2 in Dialog 1 content
Here is the working CSB Link: https://codesandbox.io/s/nested-dialog-menuitem-dropdown-forked-wymm0?file=/dialog1.js
I have a very simple problem. I've tried to put marginButtom on the TextFields. I don't have any idea why it isn't putting any margin on it.
Pls check this codesandbox link
CLICK HERE
CODE
<label>Schedule</label>
<TextField
fullWidth
name="schedule"
type="date"
variant="outlined"
className={classes.marginButtom}
/>
That's because you have a typo in your styles object.
marginButtom: {
marginButtom: "10px" // It should be marginBottom instead of marginButtom
},
I want to change outer ring of Material UI radio button.
https://material-ui.com/components/radio-buttons/
Right now I have this:
But what I would like to get is
I have tried to style PrivateRadioButtonIcon-layer class in blue, and MuiSvgIcon-root in black, but I can't find a way to style PrivateRadioButtonIcon-layer
I describe two solutions (both applicable to MUI v5):
CSS-only solution to change the color of border and circle separately.
Solution with custom icon in order to design it as you please.
CSS only solution
If you only want to change the border color as stated in the question title (and not the thickness of the border) you can do the following in MUI 5 (via the sx prop):
Style the border via the selector '& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root)' which uses the CSS general siblings combinator to only select the first occurance of the MuiSvgIcon-root class.
Style the circle via the selector '& .MuiSvgIcon-root + .MuiSvgIcon-root' which uses the CSS adjacent sibling combinator (+) to access the second svg.
Entire code of Radio button:
<Radio
{...otherRadioProps}
sx={{
'& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root)':
{
color: 'red',
},
'& .MuiSvgIcon-root + .MuiSvgIcon-root': {
color: 'blue',
},
}}
/>
Notes:
Thickness of border: We cannot make the border thinner (as your design suggests) but we can make the border thicker via CSS alone. We have to access the path element inside the SVG of the surrounding border of the radio button. Add the following to the sx prop:
'& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root) path':
{
stroke: 'red',
strokeWidth: 3,
},
Note that you need the stroke: 'red', line even though you set color: 'red' on the .MuiSvgIcon-root element.
We cannot target the circle directly with a class name because Material UI gives the border and the circle the same class name as you can see in this screenshot from Firefox DevTools:
Solution with custom icon and checkedIcon component
If you want a thinner border you have to add own SVG icons via the icon and checkedIcon props. To get the following:
you can use the following icon component:
const RadioButton = ({ checked }) => (
<svg
width="38px"
height="38px"
viewBox="0 0 24 24"
fontSize="38px">
<circle
cx="50%"
cy="50%"
r="11px"
stroke="red"
stroke-width="1px"
fill="none"
/>
{checked && (
<circle
cx="50%"
cy="50%"
r="6px"
fill="blue"
/>
)}
</svg>
);
and use it in your MUI Radio component like this:
<Radio
icon={<RadioButton />}
checkedIcon={<RadioButton checked />}
{...otherProps}
/>
1 - This is material UI tag which you are using:-
<FormControlLabel value="" control={<Radio />} label="" />
2 - give className to it and also style on Radio tag like this:-
<FormControlLabel className="targetInsideOfRadio" value="" control={<Radio style={{color:"#979797"}} />} label="" />
3 - go to custom.css file and add like this:-
.targetInsideOfRadio > span > span > div > svg ~ svg > path {
color: #2149b9;
}
4 - Hope you get the Answer :)
Is there any way to override a Material UI components styling without having to create a whole new component using withStyles()?
For instance, say I am rendering the following and I just want to change the color of the "Delete" label:
<div style={styles.rowFooter}>
<FormControlLabel
control={<ClearIcon />}
label="Clear"
title="Clear all fields."
onClick={clearFields}
/>
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
onClick={deleteRow}
/>
</div>
To do this, I'd usually have to:
Create a new styles function that returns { color: "maroon" }.
Create a new component to render the "Delete" button.
Wrap my new component withStyles(newStylesFn)(MyComponent).
But I don't want to do all of that. Is there any way to avoid it?
Update:
One way that I know of is to just pass a CSS className. I was looking for something besides that because it doesn't even work in this situation to override the nested element.
What I'd really like to be able to do is just pass style={{ color: "maroon" }}, but that only changes the color of the icon, not the actual label text...
You could use the classes prop to override styles provided by Material UI instead of className.
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
classes={{
label: 'labelStyle'
}}
/>
styles.css
.labelStyle {
color: maroon !important;
}
Although it's Not the perfect solution, it still does the job without using withStyles().