Using Material UI #next v1.0.0 beta 32:
Tabs labels wrap as expected on smaller devices.
But the wrapping makes them change font-size, which in turn, in some screen width removes the need for the text to wrap.
So I end up with this: tabs with non-wrapped labels and different font sizes.
sandbox example: https://codesandbox.io/s/o7worrr32q
In order to see the described result make the window narrow enough for at least 1 tab label to wrap, but not all.
I' have overriddeen the wrapped styles this way:
<Tab
value={value}
label='my label'
classes={{
root: classes.tab,
rootPrimarySelected: classes.selected,
labelWrapped: classes.labelWrapped
}}
/>
and my style:
labelWrapped: {
fontSize: '0.875rem'
},
The problem as illustrated in this gif animation, is that as you click on other tabs, the text wraps and unwraps alternatively, seemingly without reason.
My guess is that a padding changes somewhere, but I can't figure it out.
It was easier than I thought in the end:
I only had to use the MUI provided css override labelWrapped, as documented in the MUI API:
<Tab
aria-label="aria description"
label="Wrapping Label"
icon={<Icon />}
value={x}
classes={{
root: classes.root,
labelContainer: classes.labelContainer,
rootInheritSelected: classes.rootInheritSelected,
labelWrapped: classes.labelWrapped,
}}
component={Link}
to={{
pathname: '/my/router/url',
search: this.props.location.search,
}}
/>
and my overriding styles:
const styles = theme => ({
root: {
minWidth: 60,
height: '100%',
color: 'rgba(255,255,255,0.5)',
alignItems: 'flex-start',
paddingBottom: 5,
wordWrap: 'break-word',
flex: 1,
overflowWrap: 'break-word',
textAlign: 'center',
},
labelContainer: {
paddingLeft: 0,
paddingRight: 0,
},
rootInheritSelected: {
color: '#FFF',
},
labelWrapped: {
fontSize: '0.875rem',
},
})
Related
I'm trying to style a TextField component in a one-off fashion using the sx prop:
<TextField
size="small"
sx={{
padding: '1px 3px',
fontSize: '0.875rem',
lineHeight: '1.25rem',
}}
{...params}
/>
I'm using MUI v5. If I inspect the input element, the styles are not applied. What am I missing?
UPDATE: it seems the styles are actually added to the wrapper element via its generated class. But I need to style the input element.
I've also tried using inputProps, but that did nothing at all.
You can style the constituent components by targeting their classes directly through sx. For example:
<TextField
label="My Label"
defaultValue="My Value"
size="small"
sx={{
".MuiInputBase-input": {
padding: '1px 3px',
fontSize: '0.875rem',
lineHeight: '1.25rem',
}
}}
/>
Working CodeSandbox: https://codesandbox.io/s/customizedinputs-material-demo-forked-jog26e?file=/demo.js
What you can use is the inputProps prop. This lets you pass the sx prop as a regular object down to the input component. For example:
<TextField
size="small"
inputProps={{
sx: {
padding: '1px 3px',
fontSize: '0.875rem',
lineHeight: '1.25rem'
}
}}
/>
Docs here: https://mui.com/material-ui/api/text-field/#props
I was trying to use a npm package which has a Typography element from Material UI. This is written by me.
When I try to use it in a project, the typography css class properties override the custom css properties. An example is margin which is present in both the CSS classes but in some scenarios I see the margin of "MuiTypography-h1" overriding the custom css. How do I prevent this?
My general idea is custom CSS properties should always take precedence over MUI default CSS class properties. How can I make this happen ?
<Typography
variant="h1"
sx={{
width: '235px',
height: '96px',
fontSize: '20px',
fontWeight: 500,
lineHeight: '1.2',
color: 'primary',
textOverflow: 'ellipses',
overflow: 'hidden',
display: '-webkit-box',
WebkitLineClamp: 4,
WebkitBoxOrient: 'vertical',
marginTop: '11px',
}}
>
Title
</Typography>
Straight forward way to do: 🚀
you can directly override the MUI component with your custom CSS properties using the class name in your CSS file, for example in if you want to change the Button component's style, you can do this by applying your required CSS properties to "css-element-class-name" class on your "CSS" file as follows
.css-elemet-class-name{
color: yellow;
height: 25px;
padding: 15px;
}
I've found that, MUI theme should be created in order to override MUI--root properties with your css styles, so try somethins like this:
add your custome styles inside overrides:{}
const theme = createTheme({
overrides: {
MuiTypography: {
h1: {
'&.MuiTypography-gutterBottom': {
marginBottom: 7,
},
},
h2: {
marginBottom: props => (props.gutterBottom ? 20 : null),
},
},
},
});
and for the imports
import createtheme from '#material-ui/core/styles'
if you are using this version:
"#material-ui/styles": "^4.11.2",
I have learned react native and started developing a basic payment app . I am using flex to arrange elements inside the screen. Flex layout is consistent across all devices, but if I apply style to some components inside flux , it is not consistent across devices.
For example I have added a drop down component (Expiry Month) inside a view which is inside flex and added margin top as 25 px . If I open the app in Iphone 8 plus, it is displaying as expected, but if I open it in Iphone 8 it is touching the component above it (Even I tried changing the unit to percentage instead of pixels but still the same behavior) . I am not sure why the style is not responsive across multiple devices , can someone please guide me on how to make the styling responsive.
Please take a look at the below screenshots and code snippet . Thank you !!!
Iphone 8 Plus
Iphone 8
Code Snippet of the element
<View
style={{
flex: 0.1,
flexDirection: "row",
}}
>
<RNPickerSelect
items={CardExpiryMonth.getMonth()}
style={{
...pickerSelectStyles1,
placeholder: { color: "grey", fontSize: 15, fontFamily: myFont },
iconContainer: {
top: 35,
},
}}
placeholder={{
label: "Exp Month",
color: "green",
}}
placeholderTextColor="red"
useNativeAndroidPickerStyle={false}
textInputProps={{ underlineColor: "yellow" }}
Icon={() => {
return <Ionicons name="md-arrow-down" size={24} color="gray" />;
}}
/>
</View>
const pickerSelectStyles1 = StyleSheet.create({
inputIOS: {
fontSize: 16,
height: 50,
paddingVertical: 12,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: "gray",
borderRadius: 4,
color: "black",
paddingRight: 30, // to ensure the text is never behind the icon
width: 130,
top: 25,
left: 8 }
I think the easiest way to do is give margin to your parent view. So the code would be.
<View
style={{
marginTop: 25, // For only iOS (Platform.OS === 'ios') ? 25 : 0,
flex: 0.1,
flexDirection: "row",
}}
>
<RNPickerSelect
// your code
/>
</View>
If you want to do changes in RNPickerSelect's style SO as you can check given example here you are using it wrong you are putting inputIOS into styles that become something like below code.
<RNPickerSelect
style={{ inputIOS: {...your style} }} // this is wrong
/>
inputIOS properties should be direct properties of style.
Also find one more thing that you used top: 25, for giving margin top top property use in case of absolute position. So, Please confirm RNPickerSelect using absolute position otherwise use marginTop: 25, instead.
Let me know If you have any more query.
I am trying to make one pdf page as one base64 image using react-pdf in my reactjs web application.
and I have tried everything that I know of for making the image as an A4 size
image and fill the image completely so that one image comes as one entire page in react-pdf
I have tried width:100%, height:100%, object-fill, tried to increase the size.
but so far I am unsuccessful.
Right now the image comes on center and does not make it to all the corners in the page.
import React, { Component } from 'react'
import ReactPDF, { Page, Text, View, Document, StyleSheet , Font, Image,} from '#react-pdf/renderer';
import pic from "../pics/pic.jpeg"
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#fff',
width:"100%",
orientation:"portrait"
},
image: {
width: '100%',
height:"100%",
padding: 10,
backgroundColor: 'white',
},
});
// Create Document Component
export default class ImageToPDF extends Component {
render() {
return (
<Document >
<Page object-fit="fill" style={styles.page} size="A4">
<View object-fit="fill" style={styles.image}>
<Image object-fit="fill" style={{ padding:"0, 0, 0, 0", margin:"33%, 2rem, 2rem, 2rem",
transform: 'rotate(90deg)'}} src={pic} alt="images" />
</View>
</Page>
</Document>
)
}
}
Expected output: One image comes as one page in the pdf using react-pdf.
Actual result: one image comes in the middle of a page using react-pdf and has a lot of margin on all four sides
Thanks a lot for the help. I really appreciate it
A bit late i guess, but maybe someone else can be helped by this.
I think the code below will do the trick.
I've altered a few things:
The view element had padding, i removed it.
applied objectFit to the image element, I would suggest to use "cover" instead of "fill".
Let me know if this helped.
import React, { Component } from 'react'
import ReactPDF, { Page, Text, View, Document, StyleSheet, Font, Image } from '#react-pdf/renderer';
import pic from "../pics/pic.jpeg"
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#fff',
width: '100%',
orientation: 'portrait',
},
view: {
width: '100%',
height: '100%',
padding: 0,
backgroundColor: 'white',
},
image: {
objectFit: 'cover',
},
});
// Create Document Component
export default class ImageToPDF extends Component {
render() {
return (
<Document >
<Page object-fit="fill" style={styles.page} size="A4">
<View style={styles.view}>
<Image style={styles.image} src={pic} alt="images" />
</View>
</Page>
</Document>
);
};
};
I noticed this website has a list of checkboxes, but when I look at the HTML I just see div's with CSS classes on them.
How do you create checkboxes and check them off just by using CSS?
What is the benefit of doing it via CSS?
You certainly can. The advantage is that it gives you way more flexibility. For example, here's a basic React component that uses divs for the checkbox:
https://jsbin.com/xarewiweza/1/edit?html,js,output
const styles = {
outer: {
borderRadius: 5,
border: '2px solid gray',
width: 30,
height: 30,
cursor: 'pointer',
},
inner: checked => ({
borderRadius: '50%',
height: 28,
width: 28,
backgroundColor: checked ? 'red' : 'transparent',
margin: 1,
transition: 'background-color 0.2s ease',
})
}
class Checkbox extends React.Component {
constructor(props) {
super(props)
this.state = {
checked: false,
}
}
render() {
console.log(this.state)
return (
<div
onClick={() => this.setState({ checked: !this.state.checked, })}
style={styles.outer}>
<div style={styles.inner(this.state.checked)} />
</div>
)
}
}
ReactDOM.render(<Checkbox />, document.body)
If you wanted animated checkmarks, or other cool stuff, you'd have to go custom.
The disadvantage is that you don't get some of the default HTML functionality, though I'm not sure if there is anything useful with the checkbox specifically. For example, with the default select on iOS, it automatically uses the carousel selecter, which is a handy feature.