I can't find any documentation on how to create an icon with rectangle backgrounds like here:
There are no props for <Icon /> or <SvgIcon /> that I can find that would do this out of the box. I can style them like that myself, but was wondering if there is an existing way.
You can use the useStyles to add colors to your elements:
const useStyles = makeStyles(theme => ({
root: {
"& > svg": {
margin: theme.spacing(1)
}
},
icon1: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
},
icon2: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.text.primary,
borderRadius: theme.shape.borderRadius
},
icon3: {
backgroundColor: theme.palette.text.primary,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
},
icon4: {
backgroundColor: theme.palette.text.secondary,
color: theme.palette.primary.contrastText,
borderRadius: theme.shape.borderRadius
}
}));
And inside your icon:
<div className={classes.root}>
<AddIcon fontSize="large" color="primary" className={classes.icon1} />
<AddIcon fontSize="large" color="primary" className={classes.icon2} />
<AddIcon fontSize="large" color="primary" className={classes.icon3} />
<AddIcon fontSize="large" color="primary" className={classes.icon4} />
</div>
Here is a working example: https://codesandbox.io/s/mui-icons-styling-8t4rb?file=/demo.js
Related
I wants to create 5 custom format for any type of button(variant=outlined/contained)
I found some articles to override existing or root component style like below
export const myTheme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
backgroundColor: colors.yellow[500]
},
outlined: {
backgroundColor: colors.orange[500]
,'&:hover': {
backgroundColor: colors.green[500],
}
}
},
},
}
})
I would like to create a set of styles to MuiButton Variant = outlined like below,
ButtonSubmit:{
backgroundColor: colors.lightBlue[500],
color: colors.cyan[100] //Text color
'&:hover': {
backgroundColor: colors.lightBlue[100]
}
}
ButtonCancel:{
backgroundColor: colors.Orange[500],
color: colors.cyan[100] //Text color
'&:hover': {
backgroundColor: colors.Orange[100]
}
}
ButtonNav:{
backgroundColor: colors.green[500],
color: colors.cyan[100] //Text color
'&:hover': {
backgroundColor: colors.green[100]
}
}
How to apply those styles to button variant outlined
<Button variant="outlined" size='small' sx={{ height: '30px'}}>ButtonSubmit</Button>
<Button variant="outlined" size='small' sx={{ height: '30px'}}>ButtonCacel</Button>
<Button variant="outlined" size='small' sx={{ height: '30px'}}>ButtonNav</Button>
I am trying to custom style my icon adding a bigger font size, the background is working fine but the font size is not, I read that I can use important! but I want to know why it is not working as it has been working in version 4 .
const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
},
icon: {
fontSize: 140,
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'red',
},
},
}));
<Box style={{ display: 'flex', alignItems: 'center' }}>
<EmojiObjectsIcon color='primary' className={classes.icon} onClick={switchTheme} />
</Box>
add px for fontSize like this :
const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
},
icon: {
fontSize: '140px',
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'red',
},
},
}));
const PublicSidebar = () => {
const classes = useStyles();
return (
<Box style={{ display: 'flex', alignItems: 'center' }}>
<EmojiObjectsIcon color='primary' className={classes.icon} onClick={switchTheme} />
</Box>
)
}
I am using MaterialTable from material-table package. I want the the table to have scrollable on x-axis in order to deal with many columns. Below is the code:
<MaterialTable
title="Members Account Logs"
columns={columns}
icons={tableIcons}
data={data}
options={{
headerStyle:
{
backgroundColor: 'black',
color: 'white'
},
rowStyle:{
backgroundColor: 'white',
color: 'black'
},
}}
/>
What props should I pass to make the table scrollable on x-axis
The solution is to wrap the into the div with style as:
<div
style={{
width:'1535px',
overflowX:'auto'
}}
>
<MaterialTable
title="Members Account Logs"
columns={columns}
icons={tableIcons}
data={data}
options={{
headerStyle:
{
backgroundColor: 'black',
color: 'white'
},
rowStyle:{
backgroundColor: 'white',
color: 'black' ,
},
padding: "dense",
tableLayout: "block",
overflowX:"auto"
}}
/>
</div>
The div makes the boundaries limit for the page and hence the MaterialTable will have overflow on x-axis
Code Sandbox here:
https://codesandbox.io/s/ypx4qpjvpx
Relevant bits:
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper
},
label: {
fontWeight: "normal"
},
selected: {
fontWeight: "bold"
}
});
<Tabs value={value} onChange={this.handleChange}>
<Tab
label="Item One"
classes={{
label: classes.label,
selected: classes.selected
}}
/>
<Tab
label="Item Two"
classes={{
label: classes.label,
selected: classes.selected
}}
/>
<Tab
label="Item Three"
href="#basic-tabs"
classes={{
label: classes.label,
selected: classes.selected
}}
/>
</Tabs>
What I'm trying to do here is I need to override the default font weight style, but on selected, I want it to be bold.
The problem is - these have the same level of specificity, and label appears after selected, so it overrides it.
How would I make selected more specific/achieve what I want without using !important.
I think the easiest way is to use the root class instead of label (for the Tab component).
Demo: https://codesandbox.io/s/q3pmn9o7m4
(I added colours to make the changes easier to see.)
<Tab
label="Item One"
classes={{
root: classes.tabRoot,
selected: classes.selected,
}}
/>
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
tabRoot: {
fontWeight: "normal",
color: "#fff",
},
selected: {
fontWeight: "bold",
color: "#0ff",
}
});
A different way: https://codesandbox.io/s/8op0kwxpj
const styles = theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
tabRoot: {
fontWeight: "normal",
color: "#fff",
'&$selected': {
fontWeight: "bold",
color: "#0ff",
},
},
selected: {},
});
I am trying to create a login form like below on React Native:
I am having trouble creating a Form/ TextInput with solid border (don't worry about other CSS styling. I just need to get the solid border.)
Imports:
import { View, Text, TextInput } from 'react-native';
import { FormLabel, FormInput } from 'react-native-elements';
import { Container, Header, Content, Form, Item, Input, Label, Button } from 'native-base';
This is the style:
const styles = {
container: {
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
},
loginSquare: {
backgroundColor: '#FFFFFF',
height: 300,
width: 300,
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center'
},
loginHeader: {
backgroundColor: '#660008',
width: '100%',
height: 75
},
loginText: {
color: '#FFFFFF'
},
loginForm: {
width: 250,
height: 50
},
loginButton: {
backgroundColor: '#660008'
},
loginForm: {
height: 75,
marginLeft: 25,
marginRight: 25,
borderColor: 'gray'
}
}
and code:
render(){
return (
<View style={styles.container}>
<View style={styles.loginSquare}>
<View style={styles.loginHeader}>
<Text style={styles.loginText}>Login</Text>
</View>
<View style={styles.loginForm}>
<TextInput
style={{height: 75}}
placeholder="Email"
/>
</View>
<View style={styles.loginForm}>
<TextInput
style={{height: 75}}
placeholder="Password"
/>
</View>
<View>
<Button block style={styles.loginButton}>
<Text style={styles.loginText}>Sign In</Text>
</Button>
</View>
</View>
</View>
The code sample above was my attempt using RN's TextInput component + pure CSS. I am also looking at NativeBase and RNElements (RNElements forms API: here, NativeBase forms API: here), but RN Elements does not mention anything about Text Input + Border, and while Native Base mentioned it, I tried, unsuccessfully:
<Form bordered>
<Item>
<Input placeholder="Username" />
</Item>
</Form>
What is one way I can create bordered input like the first screenshot?
If you want a border input then you need to add the borderWidth and borderColor prop to your TextInput style prop. The code for creating these 2 TextInput with border will be as below:-
<View style={{
justifyContent: 'center',
alignItems: "center"
}}>
<TextInput
style={{
borderWidth: 2, // size/width of the border
borderColor: 'lightgrey', // color of the border
paddingLeft: 10,
height: 75
}}
placeholder="Email"
/>
<TextInput
style={{
borderWidth: 2,
borderColor: 'lightgrey',
margin: 10,
height: 75,
paddingLeft: 10
}}
placeholder="Password"
/>
</View>
This will create your TextInput with your desired border :)
<View tyle={{flexDirectoin:'column',alignItems:'center'>
<View
style{{flexdirection:'row',alignItems:'center',
borderWidth:1,borderColor:'#000000'>
<Image/>
<TextInput/>
</View>
<View
style{{flexdirection:'row',alignItems:'center',
borderWidth:1,borderColor:'#000000'>
<Image/>
<TextInput/>
</View>
</View>
Something roughly like this will do