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.
Related
I'm using Griffel https://griffel.js.org/ for the first time and I am struggling to achieve this simple thing. By default this button is hidden and when the user hover's over the parent I want to make the child visible.
I am using React so I have this button component inside the parent div.
const styles = useStyles();
<div className={styles.userContainer}>
<Button className={styles.removeUserButton} />
</div>
CSS:
export const useStyles = makeStyles({
removeUserButton: {
display: 'none'
},
userContainer: {
backgroundColor: '#fefefe',
'&:hover': {
'& removeUserButton': {
display: 'inline-block'
}
}
}
})
I was not sure if it will know what the removeUserButton class is so I also tried by making it variable. So I added:
const removeUserClassName = 'removeUserButton';
on top of the file and then in CSS:
[removeUserClassName]: {
display: 'none'
},
userContainer: {
backgroundColor: '#fefefe',
'&:hover': {
[`& ${removeUserClassName}`]: {
display: 'inline-block'
}
}
}
But this still does not work.
And in case you are wondering I have also tried the first piece of code by adding . before removeUserButton.
Has anyone used Griffel and knows how to handle this?
Appreciate any guidance. Thank you!
Here is a sandbox I created:
https://codesandbox.io/s/griffel-hover-issue-gwx1sj
The issue is that you are attempting to use a classname that is in your configuration (removeUserClassName). Yet, Griffel uses dynamic class names. So you'll need to use a different selector.
You can see the nature of the dynamic class names in this playground example.
Here is a working StackBlitz that uses the button as selector rather than class name and it works fine.
Here is the code for reference:
import { makeStyles } from '#griffel/react';
export const useStyles = makeStyles({
removeUserButton: {
display: 'none',
},
userContainer: {
width: '150px',
height: '50px',
backgroundColor: 'black',
':hover': {
'& button': { display: 'inline-block' },
backgroundColor: 'blue',
},
},
});
I've got a problem I can't seem to solve.
I use a component several times in my app but I'd like the background to be different.
I've declared an empty state for the moment, which I'm using in background-color but I can't define the color the component will have. How can I do this?
Thanks for your help
Here is a little piece of my code :
class Gallery extends React.Component {
constructor(props) {
super(props)
this.state = {
activeGal: [],
width: 1920,
teamGal: {},
isOpen: false,
photoIndex: 0,
bgColor: ''
}
}
render() {
const {activeGal, width, teamGal, isOpen, photoIndex, bgColor} = this.state
.gallery {
background-color: ${bgColor};
padding-bottom: 55px;
}
The easiest (and not recommended) way is to use the style prop:
class Gallery extends React.Component {
render() {
const { backgroundColor } = this.props;
return <div style={{ width: "100%", height: "100%", backgroundColor }} />;
}
}
const App = () => {
return (
<div style={{ height: "50vh", width: "50vw" }}>
<Gallery backgroundColor="blue" />
</div>
);
};
More popular solutions are using CSS-in-JS (like styled-components) or CSS variables (See CSS Variables for React Devs).
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 using ant design to react UI components. I need to remove the padding given for the ant design card.
So I need to remove the padding given for the classes .ant-card-wider-padding and .ant-card-body.I am using JSS for styling the UI components.
cardStyle: {
marginTop: '30px',
boxShadow: '0px 1px 10px rgba(0,1,1,0.15)',
backgroundColor: '#ffffff',
borderStyle: 'solid',
outline: 'none',
width: '100%',
},
i am using cardStyle class to styling ant design card.Now i need to remove the padding in that card.
From the documentation of Ant Design
You need to override the style in bodyStyle not cardStyle
bodyStyle: Inline style to apply to the card content
<Card title="Card title" bodyStyle={{padding: "0"}}>Card content</Card>
use fullWidth props for removing padding..,
<Card.Section fullWidth>
<ResourceList
items={[
{
id: 341,
url: 'customers/341',
name: 'Mae Jemison',
location: 'Decatur, USA',
}
]}
renderItem={
(item) => {
const {id, url, name, location} = item;
const defaultImage = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNLS4wMi0uMDFoMTAwdjEwMGgtMTAweiIgZmlsbD0iI2ZmZTBjMyIvPjxwYXRoIGZpbGw9IiNmZjk2N2QiIGQ9Ik0wIDBoNjkuNDF2MTAwSDB6Ii8+PHBhdGggZD0iTTY5LjkyIDB2NDQuMzJMNTEuMzQgNTV2NDVIMTAwVjB6IiBmaWxsPSIjZmZlMGMzIi8+PHBhdGggZmlsbD0iIzMyY2FjNiIgZD0iTTM5LjMyIDc2YTExLjg1IDExLjg1IDAgMCAwIDEyIDExLjYyVjc2Ii8+PHBhdGggZmlsbD0iIzAwOTc5NiIgZD0iTTM5LjMyIDc2YTEyIDEyIDAgMCAxIDEyLTExLjgyVjc2Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNDMuNzQgMTkuODNhMTIuODIgMTIuODIgMCAxIDEtMjUuNjQgMCIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iNCIgZD0iTTI3LjM5IDMxLjZsLTEuNTggNS45Nm05LjM3LTUuNzJsMi41NSA1LjQ3bTQuMjYtOS44NWwzLjUzIDQuNW0tMjUuNDMtNC41bC0zLjUzIDQuNSIvPjwvc3ZnPgo=" ;
const media = <Thumbnail source={defaultImage} size="small" name={name} />;
return (
<ResourceList.Item id={id} url={url} media={media}>
<Stack alignment="center">
<Stack.Item fill>
<TextStyle>{name}</TextStyle>
</Stack.Item>
<Stack.Item>
<TextStyle>Last changed</TextStyle>
</Stack.Item>
<Stack.Item>
<Button>Edit Giffy</Button>
</Stack.Item>
</Stack>
</ResourceList.Item>
);
}
}
/>
</Card.Section>
very simple just add bodyStyle in Card Component
<Card bodyStyle={{ padding: "0"}}>
You can use this:
.cardStyle {
padding: 0;
}
If didn't work, use this:
.cardStyle {
padding: 0 !important;
}
I'm not too familiar with JSS but if your other styles are being applied then I assume the issue is not with that.
I was able to remove the padding from the card with the following code.
//style.less
.panelcard { ... }
.panelcard .ant-card-body {
padding: 0;
}
// panelCard.js
import { Card } from 'antd';
require('./style.less');
const PanelCard = ({ children }) => {
return (
<Card className='panelcard'>
{children} // <p>Some Child Component(s)</p>
</Card>
);
}
// invocation
<PanelCard label='Panel Title'>
<p>Some Child Component(s)</p>
</PanelCard>
This gave me the following output (card is the white box):
I am not sure if this is the preferred way of customizing antd's components but I didn't really find too much on antd's website about overriding styles, only on extending components.
Try using :global in you scss/less
div { // or any parent element/class
:global {
.ant-card-body {
passing: <number>px; // number can be 0 onwards
}
}
}
For some reason the css style is not applying to the React Modal. Any reason why?
render() {
return (
<div>
<Modal defaultOpen={this.props.isShowing} className="openmodal">
</Modal>
</div>
);
}
CSS File
.openmodal{
text-align: center;
background-color: black;
border-radius: 0;
width: 400px;
position: relative;
}
If you want to use a javascript style you apply it like this;
const openmodal = {
content: {
textAlign: 'center',
backgroundColor: 'black',
borderRadius: '0',
width: '400px',
position: 'relative'
}
}
render() {
return (
<div>
<Modal defaultOpen={this.props.isShowing} style={openmodal}>
</Modal>
</div>
);
}
Try with the inline style.
It should be portalClassName:
<Modal defaultOpen={this.props.isShowing} portalClassName="openmodal">
</Modal>
It comes with its own DOM structure and its own set of classes.
so you have to target those classes in the screenshot