I'm using #react-navigation/drawer.
And it is very annoying with the style inside <DrawerContentScrollView>
I have demo here ( please run on andorid, on web do not have the paddingTop )
The problem:
Inside the view in DrawerContentScrollView has a style:
{
"paddingTop": 34.18181800842285,
"paddingStart": 0,
"paddingEnd": 0
}
It's good if I don't customize a header at the top. It seems StatusBar's padding. I don't know where to fix it. I want to turn it off or change the paddingTop: 0.
Does anyone have a solution to this problem?
add contentContainerStyle={{paddingTop: 0}} into <DrawerContentScrollView>
<DrawerContentScrollView
{...props}
contentContainerStyle={{paddingTop: 0}}>
<DrawerItemList {...props} />
</DrawerContentScrollView>
Related
I am learning Material UI ( ver.5.10.10 ) for the first time. I want to customize the TextField of material UI. As I do not like the transition from focus off to focus on I would like the TextField styling to always show as if it were in focus (I don't want it to be in focus, just the same style as if it were).
I'm searching in documentation & google in general but I have no clue how I can achiev this.
Images explaining:
(1) This is the default style of the TextField, without focus
(2) This is the default style of the TextField when in focus
I would like it to always look like in (2) , no matter if it's in focus or not
I tried to find a property that allows changing this behavior but I didn't find anything, I guess it could be done with a customTheme? Or maybe there is a simpler way
Thanks!
Please check below code for your requirement. You can always check the API page of the component. on API page bottomside there are CSS selectors. you can use them to customize the css of the compoent.
e.g.
1)https://mui.com/material-ui/api/text-field/#css
2) https://mui.com/material-ui/api/outlined-input/#css
<TextField
label="Outlined"
variant="outlined"
InputLabelProps={{ shrink: true }}
sx={{
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "primary.main",
borderWidth: "2px"
}
},
"& .MuiFormLabel-root": {
color: "primary.main"
},
}}
/>
You should try using onFocus and onBlur react's events on the input itself.
function Input() {
return (
<input
id="someId"
type="text"
name="inputName"
onFocus={(e) => handleOnFocusEvent(e)}
onBlur={(e) => handleOnBlurEvent(e)}
placeholder="Outlined"
style={{
position: "relative",
zIndex: 1,
}}
/>
)
}
for example if you have an input element like the above, you can try to modify the placeholder style on onFocus event and then resetting the style when the onBlur event occurs (onBlur event occurs when the element is not in focus). You can access the placeholder styles like this:
"&::placeholder": {
position: "absolute",
top: 0,
}
if your input has position: relative; zIndex: 1; try on onFocus event to set the placeholder styles to position: absolute, top: 0, left: 0, you can try using GSAP library to make a cool animation or just set a transition css property on the input itself.
I try to apply css like below example
<CustomColorIconButton>
<DeleteForeverIcon />
</CustomColorIconButton>
const CustomColorIconButton = withStyles({
root: {
color: "#ff8833",
outline: 'none',
}
})(IconButton);
this is also i try
<IconButton classes={{outline: 'none'}} >
<DeleteForeverIcon />
</IconButton>
Unless there is some other setting for styling this button, like in theme config file, setting the outline to 0 should fix this problem: outline: 0,
You should also try to see if there is somewhere else in your project some setting for buttons in general where outline is set to some other value than the one that you want. It could be that that setting is somehow overriding this one that you are using.
Also, you can try with setting the value of this parameter as !important
I'm having some trouble with the Tabs/SwipeableViews from React.
I copied this: MaterialUI Tabs.
Which overall works fine! I just have a small issue with padding in the content.
My result:
Current Result
Overall buttons work all fine and dandy, + the animation aswell. But when I inspect the page there is a 24px padding on the content (It was previously on the buttons aswell, I was able to fix this with just overriding the style. But the content of the *Swipeablev
Wanted result:
Wanted result
I've tried a few different things, even dirty tricks as doing -24px margin. But that broke the tabs.. Any help would be much appreciated and hopefully I gave enough information on the matter!
Have a nice day.
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`full-width-tabpanel-${index}`}
aria-labelledby={`full-width-tab-${index}`}
{...other}
>
{value === index && (
<Box style={{ padding: 0 }} p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
your issue was in the above function. you needed to remove the padding from the Box within the TabPanel function.
I believe the issue was you were giving it the prop of p={3} which gives it default padding
I have this component from material-ui/pickers:
<KeyboardDatePicker
value={selectedDate}
onChange={(_, newValue) => handleClick(newValue)}
labelFunc={renderLabel}
disableToolbar
variant='inline'
inputVariant='filled'
format='YYYYMMDD'
allowKeyboardControl
autoOk
inputProps={{
'data-testid': `input-${name}`
}}
InputAdornmentProps={{ position: 'start' }}
/>
This property is causing the problem.
Without it the style is fine an the icon is centered vertically in the component. When I try to move the icon to the beginning of the component there appears an extra style:
.MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel) {
margin-top: 16px;
}
That causes icon to be off-center.
This is what it looks like without InputAdornmentProps:
[1]: https://i.stack.imgur.com/xxGaM.png
And with it:
[2]: https://i.stack.imgur.com/dHA53.png
What could be causing it?
try this as below, and refer to here for more details.
InputAdornmentProps={{ position: 'start', variant: 'standard' }}
For me, what solved this issue was specify the KeyboardButtonProp - edge: "start. See here https://material-ui.com/api/icon-button/
In storybook, all stories are sitting tight agains the top left corner of the container.
This is causing problems when displaying items that have visual appearance outside the relative container e.g. a box-shadow.
So I am wondering what is the best way to add margin to the surrounding container. I had a look in the theming docs of storybook, but could not find anything related?
In .storybook/preview.js, you can just add the following:
addDecorator(storyFn => (
<>
<div style={{ margin: '1rem' }}>{storyFn()}</div>
</>
))
This way all the stories will appear with a margin of 1rem.
Adding to my preview.js:
export const decorators = [
(Story) => (
<div style={{ margin: '3em'}}>
<Story />
</div>
)
]
solved the problem for me
It's better to add padding on each component because not all components needs margins.
For example, in your .stories.tsx file
const Template: ComponentStory<typeof IconButton> = (args) => (
<div style="padding: 20px"><YourComponent {...args} /></div>
)
You can even use layout parameter to center all stories in the UI globally.
See Story layout for more details.
<!-- Checkbox.stories.mdx -->
import { Meta } from '#storybook/addon-docs';
import { Checkbox } from './Checkbox';
<Meta
title="Checkbox"
parameters={{
layout: 'centered',
}}
component={Checkbox}
/>