I am trying to apply some styles when a material-ui form control gets focus.
The pseudo-class 'hover' works well in the code below but 'focus' does not.
I am assuming that clicking into the Input component gives it focus but that does not seem to work. Any idea why and how to make it work?
import withStyles from "#material-ui/core/styles/withStyles"
import Input from "#material-ui/core/Input"
import InputLabel from "#material-ui/core/InputLabel"
import FormControl from "#material-ui/core/FormControl"
const styles = theme => ({
root: {
border: "1px solid",
borderRadius: theme.shape.borderRadius,
borderColor: "rgba(0, 0, 0, 0.23)",
marginBottom: theme.spacing.unit * 2,
padding: theme.spacing.unit,
width: "100%",
display: "flex",
flexDirection: "row",
alignItems: "center",
"&:focus": {
backgroundColor: "blue"
}
}
})
class TagsComponent extends React.Component {
render() {
return (
<FormControl variant="outlined">
<InputLabel>Tags</InputLabel>
<Input
disableUnderline
classes={{
root: this.props.classes.root
}}
/>
</FormControl>
)
}
}
export default withStyles(styles)(TagsComponent)
You can apply styles by overriding styles for input or override class name focused
const styles = {
...,
focused: {
backgroundColor: "green"
},
input: {
"&:focus": {
backgroundColor: "blue",
color: "white"
}
}
}
<Input
disableUnderline
classes={{
root: classes.root,
focused: classes.focused,
input: classes.input
}}
/>
Sandbox example https://codesandbox.io/embed/gallant-pascal-rh8jc
Related
I'm trying to remove the outline that appears when you focus on a cell in Material UI's DataGrid component.
None of these methods work:
const useStyles = makeStyles((theme) => ({
// Method 1:
'#global': {
'.MuiDataGrid-cell:focus': {
outline: 0,
},
},
// Method 2:
cell: {
'& .MuiDataGrid-cell:focus': {
outline: 0,
},
},
// Method 3:
cell: {
':focus': { outline: 0 },
},
const classes = useStyles()
const dataGridColumns: GridColumns = [
{
...other,
cellClassName: classes.cell,
}]
Edit:
'#global': {
'.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 0,
},
},
worked for me, but I would prefer not to use a global css adjustment.
You can modify the MuiDataGrid-cell class by using Material UI's useStyles() function like the following (no need to declare globally):
import { makeStyles } from '#material-ui/core/styles';
import { DataGrid } from '#material-ui/data-grid';
const useStyles = makeStyles({
root: {
'&.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}
});
const MyComponent = () => {
const classes = useStyles();
return (
<DataGrid
className={classes.root}
// ...other table setup props
/>
);
}
export default MyComponent;
Resources:
https://material-ui.com/styles/advanced/#with-material-ui-core
https://material-ui.com/api/data-grid/#css
https://github.com/mui-org/material-ui-x/issues/420
Edit: Updated for 4.0.0-alpha.29
const useStyles = makeStyles({
root: {
'&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus, &.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}
});
Just for completion sake this is how I styled the DataGrid with styled components and it worked.
const StyledDataGrid = styled(DataGrid)`
&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus,
&.MuiDataGrid-root .MuiDataGrid-cell:focus {
outline: none;
}
`;
If you're using MUI >= 5, you can simply do the follow:
<DataGrid
sx={{
"&.MuiDataGrid-root .MuiDataGrid-cell:focus-within": {
outline: "none !important",
},
}}
...
/>
const useStyles = makeStyles(
() => createStyles({
root: {
'& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-cell:focus-within': {
outline: 'none',
},
'& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-cell:focus': {
outline: 'none',
},
},
}),
);
I just needed to do this as well for a project I'm working on.
You can override many of the classes used by the datagrid, but you'll need to make sure that the selector being used is more specific in order for it to take precedence.
Many of their classes are documented here in the CSS section.
The below snippet worked for me.
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiDataGrid-root": {
"& .MuiDataGrid-colCell:focus": {
outline: "none"
},
},
},
}));
The perfect way for me was add this code to your css file:
.MuiDataGrid-root .MuiDataGrid-columnHeader,
.MuiDataGrid-root .MuiDataGrid-cell {
outline: none !important;
}
I found that if we set it just for :focus, then if we click to a button of cell, outline still visible
import React, { Component } from 'react'
import { SafeAreaView, StyleSheet, StatusBar, ScrollView, View, Text, TextInput, Button, Alert } from 'react-native';
import axios from 'axios';
export default class Main extends Component {
constructor(props){
super(props)
this.state={
ifscCode:"",
detail:{}
}
}
ifscSearch = () => {
const tha = this;
x = `https://ifsc.razorpay.com/${this.state.ifscCode}`
console.log(x);
axios.get(`https://ifsc.razorpay.com/${this.state.ifscCode}`)
.then(function (response) {
tha.setState({detail:response.data})
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
}
render() {
return (
<>
<StatusBar barStyle="light-content" />
<SafeAreaView>
<ScrollView>
<View style={styles.maincnt}>
<View style={styles.inpcnt}>
<TextInput style={styles.txtinp} maxLength={11} placeholder='ifsc code search' onChange={(e)=>this.setState({ifscCode:e.target.value})} />
</View>
<View style={styles.btncnt}>
<Button title='Search' style={styles.btn} onClick={this.ifscSearch()} />
</View>
<View style={styles.listcnt}>
<Text>BANK: {this.state.detail.BANK}</Text>
</View>
<View>
</View>
</View>
</ScrollView>
</SafeAreaView>
</>
)
}
}
const styles = StyleSheet.create({
maincnt:{
flex:1,
margin: 10,
backgroundColor: 'white'
},
inpcnt:{
marginTop: 20,
},
btncnt:{
marginTop: 20,
},
listcnt:{
marginTop: 20
},
txtinp:{
width: 350,
height: 50,
borderRadius: 25,
borderWidth: 2,
borderColor: 'indigo',
alignSelf: 'center',
padding: 10
},
btn:{
width: 100,
height: 70,
alignSelf: 'center'
},
listcnt:{
marginTop: 50,
alignContent: 'center',
justifyContent: 'center'
}
});
You are having an error here
onClick={this.ifscSearch()}
please check out the below link to solve this issue.
https://stackoverflow.com/a/66149805/10562665
Also I see a little type error here as well
tha.setState({detail:response.data})
change tha to this
Please tell us more in details what you actually need.
I was trying to customize my Modal with onBackButtonPress prop. To check if it worked or not, I passed a console.log to it like this:
<Modal onBackButtonPress={() => console.log('Something')}>
<NewRidesModal
//...
/>
</Modal>
But in fact, it doesn't even return anything whenever I press the Android back button.
Why is he prop not returning any value at all? Is it deprecated?
I use this library too react-native-modal and onBackButtonPress is working fine.
I face another issue, in my case onBackdropPress is not working, but after I fix my styling modal, everything working fine.
This is my example,
Modal js
import React, { Component } from 'react'
import { View, Text, Image, TouchableOpacity } from 'react-native'
import styles from '../styles/StyleComponentModalProduct'
import { withNavigation } from 'react-navigation'
import Price from '../../../assets/components/price/Price'
import Modal from 'react-native-modal'
class ComponentModalProduct extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<Modal
useNativeDriver={true}
animationIn={'fadeIn'}
animationOut={'fadeOut'}
backdropColor={'rgba(0, 0, 0, 0.7)'}
backdropOpacity={0.5}
isVisible={this.props.showProduct}
onSwipeComplete={() => this.props.close()}
swipeDirection={['down']}
style={{ justifyContent: 'flex-end', margin: 0 }}
onBackButtonPress={() => this.props.close()}
onBackdropPress={() => this.props.close()}>
<View style={styles.container}>
<View style={styles.subContainer}>
<View style={styles.headerContainer}>
<TouchableOpacity
onPress={() => this.props.close()}
style={styles.closButton}
/>
<View style={styles.containerImageProfile}>
<Image
resizeMode={'contain'}
style={styles.imageProfile}
source={{ uri: this.props.selectedProduct.foto }}
/>
</View>
<View style={styles.containerProfile}>
<View style={styles.containerTextName}>
<Text style={styles.textName}>
{this.props.selectedProduct.nama_produk}
</Text>
</View>
<Price
value={this.props.selectedProduct.harga_beli}
style={styles.textProfesi}
/>
</View>
</View>
</View>
</View>
</Modal>
)
}
}
export default withNavigation(ComponentModalProduct)
Style Modal js
import { StyleSheet, Dimensions } from 'react-native'
import { color } from '../../../assets/styles/ColorList'
import {
responsiveHeight,
responsiveFontSize,
responsiveWidth
} from 'react-native-responsive-dimensions'
const windowHeight = Dimensions.get('window').height
const styles = StyleSheet.create({
container: {
justifyContent: 'flex-end',
alignItems: 'center'
},
subContainer: {
height: windowHeight / 2,
backgroundColor: color.whiteColor,
width: '100%',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
paddingHorizontal: responsiveWidth(5),
paddingVertical: responsiveHeight(3)
},
headerContainer: {
justifyContent: 'center',
alignItems: 'center'
},
closButton: {
backgroundColor: '#E7E7E7',
height: 8,
width: 100,
marginVertical: 10
},
containerImageProfile: {
marginVertical: 10,
width: '100%',
justifyContent: 'center',
alignItems: 'center'
},
imageProfile: {
height: windowHeight / 3.5,
width: '90%',
borderRadius: 20
},
containerProfile: {
justifyContent: 'center',
alignItems: 'center'
},
containerTextName: {
marginHorizontal: responsiveWidth(10),
justifyContent: 'center'
},
textName: {
fontSize: responsiveFontSize(2.5),
color: color.fontColor,
textAlign: 'center'
},
textProfesi: {
fontSize: responsiveFontSize(2.5),
color: color.fontColor,
fontWeight: 'bold'
}
})
export default styles
I found out that onBackButtonPress is deprecated or it was actually removed. There should some more information about this on the documentation.
I am setting the background color of a Drawer component using useStyle. if i set background: 'red' it works fine. But setting it to background: 'primary' doesnt work. What might i be doing wrong? Here is my code:
const useStyles = makeStyles((theme) => ({
drawer: {
flexGrow: 1,
flexShrink: 0,
},
drawerPaper: {
flexGrow: 1,
background: 'primary',
},
}));
<Drawer
className={classes.drawer}
variant='persistent'
anchor='top'
open={true}
classes={{
paper: classes.drawerPaper,
}}
>
const useStyles = makeStyles(({ palette }) => ({
drawerPaper: {
flexGrow: 1,
background: palette.primary.main,
},
}));
makeStyles function contain the option param which has a palette, theme colors in it. so you can use palette.primary.main or others.
more see(mui v4 version): https://v4.mui.com/zh/system/palette/#palette
I'm thinking to do it like the following, but I'm not sure if this is the recommended way to do it:
import * as React from "react"
import { withStyles, createStyles, Theme } from "#material-ui/core"
import CssBaseline from "#material-ui/core/CssBaseline"
// global styles for a Mapper app
class MyCssBaseline extends React.Component {
render() {
return <CssBaseline />
}
}
export default withStyles(styles)(MapperCssBaseline)
function styles(_theme: Theme) {
return createStyles({
"#global": {
fontSize: 12,
// ... custom styles here ...
}
})
}
Is this how? Or is there a more recommended way?
I managed to do it with overrides when creating theme
export const theme: Theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
'#global': {
svg: {
maxWidth: '100%',
maxHeight: '100%',
},
},
},
},
})