I want to use descendant selectors with JSS to style all descendant elements with certain styles and descendant input elements with another style, but it doesn't work.
First I thought that the problem is with syntax, but I looked at this article, and the syntax was the same that in my code.
After that, I tried to remove the classes from my descendant elements, because I thought that something wrong with inheritance and style priority, but it didn't work either.
Here is my code:
React:
...
<div className={addProductContainer}>
<div className={inputsContainer}>
<input
onChange={onNewItemNameChange}
value={newItem.name}
// className={productInput}
type="text"
/>
<input
onChange={onNewItemAmountChange}
onKeyDown={keyDown}
value={newItem.amount}
// className={amountInput}
type="number"
/>
<button onClick={handleSubmit} className={submitBtn}>Add New Product</button>
</div>
</div>
...
And the JSS:
...
inputsContainer: {
width: '100%',
height: 80,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgb(255, 175, 1)',
'& *': {
height: 40,
boxSizing: 'border-box'
},
'& input': {
backgroundColor: 'black',
border: 'none',
fontFamily: ['Lexend Deca', 'sans-serif'],
width: '40%',
padding: 5,
borderRadius: [[5, 0, 0, 5]],
fontSize: '1rem',
border: 'none'
},
'& input::-webkit-outer-spin-button, &input::-webkit-inner-spin-button': {
'-webkit-appearance': 'none'
}
},
// productInput: {
// width: '40%',
// padding: 5,
// borderRadius: [[5, 0, 0, 5]],
// fontSize: '1rem',
// border: 'none'
// },
// amountInput: {
// '-moz-appearance': 'textfield',
// width: 70,
// textAlign: 'center',
// fontSize: '1.5rem',
// border: [[1, 'solid', 'black']],
// borderRadius: [[0, 5, 5, 0]]
// },
...
Here you can see that I removed the classes, and put all styles from productInput to the descendant. When it was in class, it was working fine, but as a descendant, it doesn't work.
Try this '& > *' to set style to all descendants
Related
For some reason when I'm trying to align the contents of the Card which is the Image and Card.Title it will always align it like a column, the two won't go next to each other.
However, if I put the flexDirection: "row" in the modal container (which contains these two cards) it puts the cards side by side as it should. Why would it not work on the contents of the card itself?
Thanks
<Provider>
<Portal>
<Modal Modal visible={themeVisible} onDismiss={hideThemeModal} contentContainerStyle={modalStyle}>
<Card containerStyle={{ backgroundColor: '#3D3D3D', margin: 0, padding: 0, borderWidth: 0, elevation: 0, borderColor: '#212121' }}>
<Card.Title style={{ color: '#FFFFFF', marginBottom: 0, fontSize: 25, marginTop: 10 }} >Theme Selection</Card.Title>
<Text style={{ color: '#AAAAAA', textAlign: 'center', marginBottom: 10 }} >Thanks for supporting Fitness!</Text>
</Card>
<TouchableOpacity onPress={hideThemeModal}>
<Card containerStyle={{ flexDirection: "row", backgroundColor: '#3D3D3D', marginTop: 10, paddingBottom: 30, padding: 30, borderWidth: 0, borderTopWidth: 1, borderBottomWidth: 1, elevation: 0, borderColor: '#212121' }}>
<Image style={{ width: 25, height: 25 }} source={require('./assets/yellow-dark.png')} />
<Card.Title style={{ color: '#FFFFFF' }} >Yellow / Dark</Card.Title>
</Card>
</TouchableOpacity>
</Modal>
</Portal>
</Provider>
Tried float: left, flexdirection, inline-block, etc no change
Here is the styles for modalStyle and the safeareaview style
const modalStyle = {
backgroundColor: '#3D3D3D',
padding: 20,
margin: 35,
borderWidth: 1,
borderRadius: 7.5,
borderColor: '#F3AF21',
};
const styles = StyleSheet.create({
container: {
display: "flex",
flex: 1,
backgroundColor: '#181818',
},
});
Card component has 2 props for styling. containerStyle is used to style the outer container while wrapperStyle for inner container. In your code you should replace containerStyle with wrapperStyle
<Card wrapperStyle={{ flexDirection: "row", backgroundColor: '#3D3D3D', marginTop: 10, paddingBottom: 30, padding: 30, borderWidth: 0, borderTopWidth: 1, borderBottomWidth: 1, elevation: 0, borderColor: '#212121' }}>
<Image style={{ width: 25, height: 25 }} source={require('./assets/yellow-dark.png')} />
<Card.Title style={{ color: '#FFFFFF' }} >Yellow / Dark</Card.Title>
</Card>
Note: You can adjust the other attributes in both the styles as per your need.
Example between correct and incorrect item stacking
Please refere to the image. I have twee phones one with a screen width of 1440px and one with 1080px.On the 1440 screen the items are stacked in a two column structure. On the 1080 everything gets stacked on the left column. Is there a way to write a javascript function that looks at the device width and sets the item to adjust accordingly?
const Complex = () => {
return (
<View style={{ flex: 1 }}>
<CarouselCards />
<Divider
style={{
color: 'black',
backgroundColor: 'black',
marginHorizontal: 15,
}}
/>
<ScrollView horizontal={false}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{KPI.map((item) => (
<View style={styles.cardContainer} key={item.id}>
<View style={{ flexDirection: 'row' }}>
<View
style={{
flex: 1,
flexWrap: 'wrap',
}}
>
<View style={styles.cardContent}>
<Text style={styles.cardTitle}>{item.title}</Text>
<Text style={styles.bigFatNumber}>{item.value}</Text>
<Text style={styles.smallKPI}>{item.kpi}</Text>
<View style={{display:' flex'}}>
<BarChart
style={{ height: 100, width: 130 }}
data={barData}
svg={{ fill }}
contentInset={{ top: 1, bottom: 30 }}
></BarChart>
</View>
</View>
</View>
</View>
</View>
))}
</View>
</ScrollView>
</View>
)
export default Complex
const styles = StyleSheet.create({
cardContainer: {
backgroundColor: '#fff',
width: 168,
height: 190,
margin: 15,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
padding: 15,
},
chartContainer: {
backgroundColor: '#fff',
width: 168,
height: '100%',
margin: 15,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
padding: 15,
flexWrap: 'wrap',
display: 'flex',
},
cardTitle: {
// letterSpacing: 0.25,
fontStyle: 'normal',
fontSize: 14,
},
cardContent: {
alignItems: 'flex-start',
flexWrap: 'wrap',
gap: 6,
paddingVertical: 5,
},
bigFatNumber: {
letterSpacing: 0.25,
lineHeight: 36,
fontWeight: 'bold',
fontStyle: 'normal',
fontSize: 24,
},
smallKPI: {
letterSpacing: 0.25,
lineHeight: 24,
fontWeight: 'bold',
fontStyle: 'normal',
fontSize: 14,
order: 1,
color: 'rgba(0, 0, 0, 0.6)',
},
})
You can get device-width with Dimensions that you get in React native - https://reactnative.dev/docs/dimensions. Yust add your items fixed width(something like (width-yourMargin) / 3) or you can use flex and not use fixed width.
use
react-native-responsive-dimensions
use key word npm install for windows
npm i react-native-responsive-dimensions
import using that
import {
responsiveHeight as rh,
responsiveWidth as rw,
responsiveFontSize as rf,
} from "react-native-responsive-dimensions";
how to use
width:rw(100),
height:rh((100),
fontSize:rf(1.5),
I am struggling to get the material-ui app bar example to work as I would like to. Codesandbox (from Material-UI website).
What I Am Trying To Achieve:
What I am trying to achieve is to get the search field to grow all the way to the right (effectively taking the majority of the app bar no matter what screen size).
What I Have Tried:
I have tried using flexGrow: 1 as follows which only grows the search bar slightly (not till the end):
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
width: 'auto',
flexGrow:1
},}
I have also tried setting width: '100%' instead of 'width: auto' but that makes the Material-UI logo disappear.
Image of desired result:
Remove the width: 'auto' from your current code,
Add minWidth with title
title: {
display: 'none',
minWidth: '120px', // Add
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%', // Keep
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
// width: 'auto', // Remove
},
},
I have tried below code this works but i need shadow like effect for line .
<View
style={{
borderBottomColor: 'grey',
borderBottomWidth: 0.5,
marginBottom: 15,
marginTop: 50,
margin: 10,
}}
/>
This will render a shadow for you in the view.
<View
style={{
borderBottomColor: 'grey',
borderBottomWidth: 0.5,
marginBottom: 15,
marginTop: 50,
margin: 10,
shadowOffset: {
width: 2,
height: 2,
},
shadowColor: 'rgba(0,0,0,0.8)',
shadowOpacity: 0.5,
shadowRadius: 10,
}}
/>
But as you said you want gradient then you might need to add this library :
https://github.com/react-native-community/react-native-linear-gradient
I'm using material-ui's JSS implementation to styling classes.
I have a lot of duplicated code when it comes to the components' styles since I have separated my components.
For example, I have cards which all use common styling:
const styles = theme => ({
cardContainer: {
position: 'relative',
width: '50%',
padding: theme.spacing.unit / 2,
},
cardOuter: {
height: '100%',
width: '100%',
textAlign: 'start',
},
card: {
width: '100%',
background: theme.palette.backgrounds.card.off,
},
cardOn: {
background: theme.palette.backgrounds.card.on,
},
cardUnavailable: {
background: theme.palette.backgrounds.card.disabled,
},
cardContent: {
display: 'flex',
flexWrap: 'wrap',
minHeight: 98,
height: 98,
[theme.breakpoints.down('sm')]: {
minHeight: 74,
height: 74,
},
padding: `${theme.spacing.unit * 1.5}px !important`,
},
});
which I would only rarely want to extend upon the styles inside the component, but would like to import these objects into an existing styles function so I do not have to duplicate these objects.
Has anyone or does anyone know how to do this?
Thanks
Figured it out. For future viewers:
const styles = theme => ({
...card(theme),
grid: {
height: '100%',
width: 'fit-content',
paddingLeft: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit * 2,
flexWrap: 'nowrap',
overflowY: 'hidden',
},
name: {
overflow: 'hidden',
textOverflow: 'ellipsis',
fontSize: '1.12rem',
fontColor: theme.palette.text.main,
[theme.breakpoints.down('sm')]: {
fontSize: '0.9rem',
}
},
state: {
textOverflow: 'ellipsis',
margin: '0 auto',
marginTop: theme.spacing.unit / 2,
fontSize: '1.0rem',
fontColor: theme.palette.text.light,
[theme.breakpoints.down('sm')]: {
fontSize: '0.8rem',
}
},
alarmArmedHome: {
background: theme.palette.backgrounds.card.alarm.home,
},
alarmArmedAway: {
background: theme.palette.backgrounds.card.alarm.away,
},
alarmTriggered: {
background: theme.palette.backgrounds.card.alarm.triggered,
},
icon: {
margin: '0 auto',
color: theme.palette.text.icon,
fontSize: '2.7rem',
[theme.breakpoints.down('sm')]: {
fontSize: '1.7rem',
}
},
});
card.js
const styles = (theme) => ({
cardContainer: {
position: 'relative',
width: '50%',
padding: theme.spacing.unit / 2,
},
cardOuter: {
height: '100%',
width: '100%',
textAlign: 'start',
},
card: {
width: '100%',
background: theme.palette.backgrounds.card.off,
},
cardOn: {
background: theme.palette.backgrounds.card.on,
},
cardUnavailable: {
background: theme.palette.backgrounds.card.disabled,
},
cardContent: {
display: 'flex',
flexWrap: 'wrap',
minHeight: 98,
height: 98,
[theme.breakpoints.down('sm')]: {
minHeight: 74,
height: 74,
},
padding: `${theme.spacing.unit * 1.5}px !important`,
},
});
export default styles;
So you pretty much have to join the objects passing in the theme if required:
...card(theme),