I am trying to use rgb function in Material Box. How can this be done? This is not working.
Original Code:
<Box
width={24}
style={{
background: `rgb(${appointmentReasonView.rgbColorView})`,
whiteSpace: 'pre-wrap',
}}
>
New Code Attempt:
<Box
width={24}
whiteSpace="preWrap"
background={rgb(${appointmentReasonView.rgbColorView})}
>
Error: Cannot find name 'rgb'
With styled components you can do it like this:
import { styled } from "#mui/system";
const BoxStyled = styled(Box)`
background: ${({ background }) => `rgb(${background})`};
`;
<BoxStyled
width={24}
whiteSpace="preWrap"
background={appointmentReasonView.rgbColorView} // Pass here the value from api
/>
Let me know if it helps (the value from the api should be rendered inside the rgb in the styled component. So when you inspect the lement it should show a correct css value like background: rgb(255 0 0)). Here is a working codesandbox.
Related
I'm trying to style the MUI <Paper> component, however setting the background color isn't working. Following the online tutorials I'm applying the background-color CSS property to the root element of the Paper but the color remains white while other CSS properties - in this case padding and text-align work. Can someone please tell me what I am missing?
import React from 'react';
import { Paper, Typography } from '#mui/material';
import { makeStyles } from '#mui/styles';
import AccessAlarmIcon from '#mui/icons-material/AccessAlarm';
const useStyles = makeStyles({
root: {
textAlign: 'center',
padding: 15,
backgroundColor: '#37474f',
}
});
export default function Header() {
const classes = useStyles();
return(
<Paper outlined square className={classes.root}
>
<Typography variant="h2" component="h1">
Pomodoro Cl
<AccessAlarmIcon sx={{ fontSize: 45, color: 'red' }} />
ck
</Typography>
</Paper>
)
}
First of all your attribute outlined is incorrect, it should bevariant="outlined" as per the documentation.
For the background-color not working, you will need to add !important to the property so it takes precedence over mui's default styling.
Here's a working codesandbox for you: https://codesandbox.io/s/strange-smoke-y6yhv?file=/src/App.tsx
I'm using Styled Components in my app. I am collecting state via useSelector using React-Redux, this state returns either a 0 or 1 - 0 telling me the app is currently in light mode, 1 telling me the app is currently in dark mode.
How do I edit the style based on the value? I have tried the following...
const Logo = styled(motion.h1)`
color: ${themeColour ? "white" : "black"};
`;
However, this didn't work as the variable exists inside a function. I then tried to style the h1 component directly in the JSX like this...
<h1 style={{color: ${themeColour ? "white" : "black"}}}>
I got the following error...
"./src/components/Nav.js
SyntaxError: C:\Users\james\Documents\Web Development\Portfolio\Project 1 - RelaxStation\Code\relax-station\src\components\Nav.js: Unexpected token, expected "," (14:26)"
Could someone help me figure this out please? Below is my full code for the component (please note I couldn't indent it correctly when pasting the code in here, but it is correct in Visual Studio Code)...
// Libraries
import styled from "styled-components";
import { motion } from "framer-motion";
// Redux
import { useSelector } from "react-redux";
const Nav = () => {
// Get current theme colour code - Gives a 0 for light mode or a 1 for dark mode
const themeColour = useSelector((state) => state.theme);
return (
<StyledNav>
<Logo>
Relax<span>Station</span>
</Logo>
<div className="main">
<h4>MAIN</h4>
<ul className="main-links">
<li>Home</li>
<li>Artists</li>
<li>Albums</li>
</ul>
</div>
<div className="playlists">
<h4>PLAYLISTS</h4>
<ul className="playlist-links">
<li>Early morning</li>
<li>Studying</li>
<li>Driving</li>
<li>Ambience</li>
</ul>
</div>
</StyledNav>
);
};
const StyledNav = styled(motion.nav)`
position: static;
width: 10rem;
top: 0;
left: 0;
min-height: 95vh;
border: 2px solid rgba(255, 255, 255, 0.125);
`;
const Logo = styled(motion.h1)`
color: ${themeColour ? "white" : "black"};
`;
export default Nav;
Thanks in advance
You need to pass on the themeColor as a prop to tthe Logo component while render
<Logo themeColor={themeColor}>
Relax<span>Station</span>
</Logo>
and then use it with styled component like
const Logo = styled(motion.h1)`
color: ${props => props.themeColour? "white" : "black"};
`;
For the h1 tag your code didn't work because your syntax was incorrect
Below is the correct usage
<h1 style={{color: themeColour ? "white" : "black"}}>
I am trying to implement a hover effect in the react component using react inline-styling.
const InfoWindow: React.FC<IInfoWindowProps> = ({ room }) => {
const info_window_image = {
width: "100%",
height: "168px",
background: `url(${room.pictures[0].image.large}) no-repeat`,
backgroundSize: "contain",
cursor: 'pointer'
};
return (
<div className="info_window_container">
<div style={info_window_image} />
</div>
)
};
div tag under info_window_container gets style object info_window_image .
I can successfully receive an image from API but I want to give zoom-in animation when the user hovers the image in the component.
I gave className to the div and styled in CSS file however it does not work. Styles I declared in CSS file do not render.
How can I make hover or focus effect in react-inline-styling?
I'm trying to implement an Accordion component with Material UI.
The problem I'm facing is that a gray line is automatically inserted above the component although I prefer white background. How can I remove it? Here is demo code.Material UI accordion component demo
With the release of Material-UI v5.0.0-beta.0, custom styling has become much easier via use of the new sx prop.
The sx prop may be used on all Material-UI components as of v5. In our world, this has eliminated the need for hack-ish style overrides and custom classes.
Here's how to remove the "line above the accordion" with the sx={} prop.
return (
<Accordion
disableGutters
elevation={0}
sx={{
'&:before': {
display: 'none',
}
}}>
<AccordionSummary expandIcon={<ExpandMore/>}>
...your summary here...
</AccordionSummary>
<AccordionDetails sx={{ maxWidth: '480px' }}>
...your details here...
</AccordionDetails>
</Accordion>
);
Note that I've passed the sx prop to <AccordionDetails/> as well.
You must pass an object to sx so you're always going to have a double set of curly braces...
sx={{ borderBottom: '1px solid #dddddd', borderRadius: '4px' }}
To make gray line white you have to override the css classes of Accordion element.
The grey line comes from .MuiAccordion-root:before style. So at first change Accordion props adding classes props like:
...
<Accordion
elevation={0}
classes={{
root: classes.MuiAccordionroot
}}
>
...
And then on your useStyles add:
MuiAccordionroot: {
"&.MuiAccordion-root:before": {
backgroundColor: "white"
}
}
and grey line becames white. Here your code modified.
Try adding some css file and access this class MuiAccordion-root:before and change it's height to 0px. It's the pseudo-element that's showing the gray line above the Accordian.
// in my TS project i did it like this:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
test: {
'&:before': {
display: 'none',
},
);
<Accordion
classes={{
root: classes.test,
}}
expanded={expanded}
>
To remove line between Accordion summary and Accordion details you just need to pass borderBottom='none !important'
const useStyles = makeStyles({
Summary:{
borderBottom:'none !important'
});
const AccordionComp=()=>{
const classes = useStyles();
return(
<Accordion>
<AccordionSummary className={classes.Summary}>
......
</AccordionSummary>
<AccordionDetails>......</AccordionDetails>
</Accordian>
)}
export default AccordionComp;
You can wrap the Accordion component in a div and it will remove the line. It comes from a :before property that I imagine is helpful when you have more than one in a row to visually divide.
I'm trying to figure out how to increase the font size of a label in my Material UI button in react.
I have a button setup:
import React from 'react';
import MyButton from '../materialui/Button.js';
const style = {
background: '#FF5349',
color: 'white',
padding: '0 30px',
textTransform: "uppercase",
};
const Start = () => (
<span>
<MyButton style={style} size="large">GET STARTED</MyButton>
</span>
);
export default Start;
I can't find a way to add font-size to the styles property.
Other stack overflow posts suggest doing it as an inline style using the style property, but that overrides my const definition.
If you don't want to add fontSize: '42px' to your styles object (probably because you want to reuse this somewhere else?) you can just build a new one with the style added for your button:
const Start = () => (
<span>
<MyButton style={{...style, fontSize: '42px'}} size="large">GET STARTED</MyButton>
</span>
);
I don't know if myButton in Material is the same of RaisedButton Anyway,
Button in Material-ui it's coming like Div > Button > Div > Div > span
So if you want to styling the button first of all you need to create a CSS class like
in your css file
This for styling button
.StylingButtonExample button{
background-color: red;
}
This for styling the text inside the button
.StylingButtonExample button div div span{
color: blue;
}
in react file
import RaisedButton from 'material-ui/RaisedButton';
<RaisedButton label="Default" className='StylingButtonExample' />
Hope this will help you and the others
Assuming the <MyButton /> Component is, in fact, the <RaisedButton /> Component that material-ui offers, you can simply apply your label styling to the labelStyle property.
Therefore, if you wanted to change the font-size to 42px, you could simply write it as follows:
<MyButton labelStyle={{ fontSize: '42px' }}>GET STARTED</MyButton>