i am declaring css style with js, how to add :hover selector to cn_app_card ?
export var card_style = {
cn_app_card: {
width: 200,
height: 508,
}
};
Try adding a &:hover object with the apropiate stylings:
export var card_style = {
cn_app_card: {
width: 200,
height: 508,
"&:hover": {
backgroundColor: "red",
transform: "scale(1.1)",
},
},
};
Related
I am using a Material UI React component called TextareaAutosize:
<TextareaAutosize
minRows={2}
style={resize: 'none'}
defaultValue={<span style={{fontSize: "20px", color: "blue"}}>Content Body</span>}
/>
Instead of getting Content Body in the TextareaAutosize component, I'm getting this as the default value:
How do I add styling to the defaultValue?
Edit code on Stack Blitz: https://stackblitz.com/edit/react-fnx6we?file=demo.js
EDIT: For clarification, I want ONLY the defaultValue to have the styling I applied. When the user starts typing or removes the defaultValue and starts typing, the styling of the defaultValue should NOT be applied.
defaultValue parameter accepts String values only. Use parameter style to define additional styling. Or use jss like styling for components (check #mui/styles) EDIT: to change styling of the element "on the fly" you will need to use additional variables and functions. Check demo on code on Stack Blitz.
import React, { useState } from 'react';
import TextareaAutosize from '#mui/material/TextareaAutosize';
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles({
textAreaWithStyle: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
fontSize: '20px',
color: 'blue',
resize: 'none',
},
textAreaWithoutStyle: {
resize: 'none',
},
});
export default function MaxHeightTextarea() {
const classes = useStyles();
const [valueOfInput, setValueOfInput] = useState('Default Text');
const returnStyleBasedOnInput = () => {
if (valueOfInput === 'Default Text') {
return classes.textAreaWithStyle;
} else {
return classes.textAreaWithoutStyle;
}
};
const checkIfDefaultValueInTextAreaAndRemooveIt = () => {
if (valueOfInput === 'Default Text') {
setValueOfInput('');
}
};
const onInputChange = (e) => {
setValueOfInput(e.target.value);
};
return (
<TextareaAutosize
maxRows={4}
className={returnStyleBasedOnInput()}
value={valueOfInput}
onChange={onInputChange}
onClick={checkIfDefaultValueInTextAreaAndRemooveIt}
/>
);
}
Edit code on Stack Blitz: https://stackblitz.com/edit/react-fnx6we-3vdn7i?file=demo.js
I try to use a pseudo class for the mui-app-bar. Ive read some questions about it here. But it didnt bring me any further. My component looks like this:
const styles = (theme: Theme) => createStyles({
appBar: {
backgroundColor: theme.palette.background.default,
height: '48px',
'&::before': {
content: "",
position: 'absolute',
left: '2.5%',
bottom: 0,
right: '2.5%',
width: '95%',
borderBottom: '1px solid magenta',
}
}
});
class TabBar extends React.Component<WithStyles<typeof styles> & WithTranslation, TabBarInterface> {
...
render() {
const { classes } = this.props;
...
return (
<AppBar className={classes.appBar} position="relative">
...
</AppBar>
);
}
}
export default withStyles(styles)(withTranslation()(TabBar));
Edit
Applying the pseudo class with one colon did not work for me either.
It is because content value actually is empty.
You need to use something like:
'&::before': {
content: '""',
}
Saw that the default is:
'&::before': {
content: '""',
}
Instead I overrode it using:
'&::before': {
content: 'none',
}
Ive found out that adding pseudo classes to html5 header elements does not work.
I tried it like this but it doesn't do anything:
const myToast = () => (
<div style={{backgroundColor: myColors.green}}>
...some text content...
</div>
)
Then in App.js
class App extends Component {
showMyToast = () => {
toast(<MyToast />, {
closeOnClick: false,
toastId: 'my_toast',
autoClose: true,
closeButton: false,
position: toast.POSITION.BOTTOM_CENTER,
className: 'toast'
})
}
}
I'm seeing a white toast with my text on it.
Easiest Solution
The easiest solution to adjust the BG of Toastify, or in fact any styles would be to use the ToastContainer props toastStyle: which takes in JSX attributes.
After importing the necessary packages , while adding the ToastContainer component , just pass in the toastStyle prop and you shall be good to go.
<ToastContainer toastStyle={{ backgroundColor: "crimson" }} />
Based on #Laurens answer I found the pattern in the code sandbox very useful. Here's what I did to get the notification shown below
First, I mounted my toast container at the root of my App, inside my App component
import React from 'react';
import { Provider } from 'react-redux';
import { ToastContainer } from 'react-toastify';
import store from './redux/store';
import Routes from './Routes';
const App = () => {
return (
<Provider store={store}>
<ToastContainer
autoClose={2000}
position="top-center"
className="toast-container"
toastClassName="dark-toast"
/>
<Routes />
</Provider>
);
};
Then, for each notification style, I defined a series of CSS styles. The components looked like so
// customToast.js
import { toast } from 'react-toastify';
import { css } from 'glamor';
const customToast = {
success(msg, options = {}) {
return toast.success(msg, {
...options,
className: 'toast-success-container toast-success-container-after',
progressClassName: css({
background: '#34A853',
}),
});
},
error(msg, options = {}) {
return toast.error(msg, {
...options,
className: 'toast-error-container toast-error-container-after',
progressClassName: css({
background: '#EE0022',
}),
});
},
info(msg, options = {}) {
return toast.info(msg, {
...options,
className: 'toast-info-container toast-info-container-after',
progressClassName: css({
background: '#07F',
}),
});
},
};
export default customToast;
To use these just do import customToast from 'customToast.js'. Now you can use customToast.success, customToast.error etc
The style for the success notification is shown below
.toast-success-container {
color: #000 !important;
border-radius: 8px !important;
background: #FFFFFF !important;
border: 1px solid #34A853 !important;
box-shadow: 0px 1px 5px rgba(248, 175, 175, 0.1) !important;
}
.toast-success-container-after {
overflow: hidden;
position: relative;
}
.toast-success-container-after::after{
top: 0;
left: 0;
content: '';
width: 7px;
height: 100%;
position: absolute;
display: inline-block;
background-color: #34A853;
}
You'll also notice that I had to stick a series of !importants in my css
The easiest solution is setting the theme property, as mentioned in the docs.
You can:
Set theme globally
//Set the theme globally
<ToastContainer theme="colored" />
Or define per toast
// define per toast
toast.info("Display a blue notification of type info", { theme: "colored" });
This changes the background color based on the toast type (error, warning, info etc).
Hopefully this helps anyone in future.
You can use Glamor for easily adjusting simple things like toast background color.
This example displays a simple toast with a green background using glamor.
toast("Hello!", {
className: css({
background: "#00FF00 !important"
})
});
If the requirements are more complex you can implement your own styles globally as per this example.
You can simply override it in CSS if the color is a hardcoded value. However, you could also use Helmet if the color needs to be variable e.g. as an app theme color that can change through user preferences or something. Looking at your example, you would include
<Helmet
style={[
{
cssText: `
.Toastify__toast--success {
background: ${customColor} !important;
}
`,
},
]}
/>
The customColor variable would be pulled out of your store and could be updated on the fly, giving you a custom toast background color.
I think this is the simplest solution.
1.install glamorous using following link https://glamorous.rocks/basics/#installation
2.after that import css to your js file like this..
import { css } from 'glamor';
3.after that give your own style to the toast popup like this..
toast.configure({
autoClose:10000,
draggable: true,
hideProgressBar: true,
position: toast.POSITION.TOP_CENTER,
toastClassName: css({
fontSize: '18px !important',
backgroundColor: '#da1c36 !important',
padding: '15px !important'
}),
});
What about (for version 9.1.1):
toast.info(msg, {
position: 'top-right',
autoClose: 15000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: 0,
progressStyle: { background: '#E8DFD0' },
theme: 'colored',
style: { background: '#766852' },
});
};
**If you want change the without CSS.
notify = () => this.toastId = toast.error('error') { error: "error", info: "info", success: "success", warning: "warning", } Use like this Above
OtherWise .
Toastify__toast--error{ background-color: red; }**
I am trying to adjust the padding of MUI Table.
last-child gets padding 24px which I want to adjust. I have tried to override the theme and to use classes{{root: classes.xxx}} but am not able to change it.
Below is the code I used for overriding the theme (I have also tried to override MuiTableRow and MuiTableColumn):
const theme = createMuiTheme({
overrides: {
MuiTableCell: {
root: {
paddingTop: 4,
paddingBottom: 4,
'& $lastChild': { paddingRight: '5px' },
},
paddingDefault: {
padding: '40px 12px 40px 16px',
},
},
},
});
This is the CSS that I am trying to change (the last cell of each row in the table):
.MuiTableCell-root-511:last-child {
padding-right: 24px;
}
Hope someone can give a helping hand.
Thats the right approach, you just have a few syntax errors in your JSS.
The last child selector should be:
'&:last-child': {}
Here a complete example
const theme = createMuiTheme({
overrides: {
MuiTableCell: {
root: {
paddingTop: 4,
paddingBottom: 4,
"&:last-child": {
paddingRight: 5
}
}
}
}
});
For those who don't want to override theme, you can achieve the same result by providing classes object prop as shown here.
const useStyles = makeStyles({
cell: {
'&:last-child': {
paddingRight: 5,
},
},
});
Provide it to your TableCell as usual;
<TableCell className={classes.cell}>
This will override the &:last-child attribute of your cell. I've found this method to be a little more convenient when I'm not changing anything else in the theme.
In MUI v5, you can use the sx prop and select the last TableCell like this:
<Table
sx={{
'& .MuiTableCell-root:last-child': {
bgcolor: 'pink',
},
}}
>
Or if you want to use createTheme() to override globally:
const theme = createTheme({
components: {
MuiTableCell: {
styleOverrides: {
root: {
'&:last-child': {
backgroundColor: 'tomato',
},
},
},
},
},
});
Live Demo
I'm trying to recreate this shape in React Native. It's made with 2 overlapping shapes, one square and one with a border-radius on the top and bottom (the square is there to hide the border radius on the top).
Here's the CSS used to generate it:
#square {
width: 200px;
height: 180px;
background: red;
}
#tv {
position: relative;
margin-top: 100px;
width: 200px;
height: 200px;
margin: 20px 0;
background: red;
border-radius: 100px / 20px;
}
But I can't find any documentation on the border-radius property, so I don't know if it's possible to do elliptical radii like you can in CSS.
To construct an elliptical view
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
//import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.oval}/>
</View>
);
}
}
const styles = StyleSheet.create({
oval: {
width: 100,
height: 100,
borderRadius: 50,
//backgroundColor: 'red',
borderWidth:2,
borderColor:'black',
transform: [
{scaleX: 2}
]
},
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
});
Playground: https://snack.expo.io/BJd-9_Fbb
This may be the shape similar to the one you have given.`
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
//import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.oval}/>
<View style={styles.square}/>
</View>
);
}
}
const styles = StyleSheet.create({
square:{
width:200,
height:180,
backgroundColor:'red',
position:'absolute',
top:160
},
oval: {
position:'absolute',
width: 100,
height: 200,
borderRadius: 50,
backgroundColor: 'red',
//borderWidth:2,
//borderColor:'black',
transform: [
{scaleX: 2}
]
},
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
});
`
https://snack.expo.io/r11PnOK-Z``
EDIT
You can add different border-radius to different vertices like below
borderTopLeftRadius: '10%',
borderTopRightRadius: '30%',
borderBottomLeftRadius: '50%',
borderBottomRightRadius: '70%',
Playground: https://snack.expo.io/BJd-9_Fbb