I am using npm module powerbi-report-component in my react application. I need to change background color and colors of the text in the report.
const reportStyle = {
width: '350px',
height: '660px',
color: 'red !important',
border: '0',
padding: '0px',
background: '#33444C',
bgColor: '#33444C',
};
I am sending this reportStyles to report module..but they are not applied to the component. Can anyone please help me with this.
Related
I am trying to add a border color to a styled component using MUI:
const Style = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
borderColor: theme.palette.success.main,
border: 10,
borderTop: 10,
width: INFO_WIDTH
}));
However, I don't see any change in the effect:
Screenshot of browser
I'm trying to follow the guidelines specified by MUI but it's not working. Does anyone know a workaround?
The guidelines you linked to are for the sx prop (or lower-level usage of #mui/system) -- not the styled API. One key difference between the two is that for the sx prop, a numeric border value is treated as a shorthand for ${value}px solid. The styled API does not automatically add solid, so border: 10 just becomes border: 10px which is not sufficient for causing a border to be displayed.
A separate issue with your example is that you specify borderColor before border. Since border is a shorthand for border-width, border-style, and border-color, even when you don't specify a color with the border value, a previously specified border-color will be overridden with the default.
Below is an example showing the correct syntax for specifying the border for both sx and styled:
import * as React from "react";
import Box from "#mui/material/Box";
import { styled } from "#mui/material/styles";
const StyledDiv = styled("div")(({ theme }) => ({
border: "10px solid",
borderColor: theme.palette.success.main,
width: "5rem",
height: "5rem",
margin: theme.spacing(1)
}));
export default function BorderSubtractive() {
return (
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box
sx={{
border: 10,
borderColor: "success.main",
width: "5rem",
height: "5rem",
m: 1
}}
/>
<StyledDiv />
</Box>
);
}
Before anyone removes this question and says it is similar to this one please hear me out. I am trying to do almost exactly what is being done in that post. The issue is the person who responded just gave some CSS which does not answer the question at hand. I am trying to do this FULLY in MUI. I would preferably want to be able to style my component using the makeStyles hook.
How would one implement an underline animation below a typography component such as the ones on the navigation bar here? I am really new to JS and MUI so I would appreciate something which is well explained and implemented so I can learn the terminology as well as the frameworks themselves.
This is my code so far. It's just like the one in the first link.
const useStyles = makeStyles({
link: {
color: "white",
position: "relative",
"&:before": {
content: "",
position: "absolute",
width: "0",
height: "2px",
bottom: "0",
left: "0",
backgroundColor: "#FFF",
visibility: "hidden",
transition: "all 0.3s ease-in-out",
},
"&:before:hover": {
visibility: "visible",
width: "100%"
}
}
});
function NavButton(props){
const classes = useStyles();
return (
<a href={`/#${props.text}`}>
<Link className={classes.link}>
<Typography>{props.text}</Typography>
</Link>
{/*<p className={"hover-underline-animation"}*/}
{/* {props.text}*/}
{/*</p>*/}
</a>
);
}
I am receptive to any other types of input. These questions are just as much a way for me to learn as a way to get an answer.
Working code
const useStyles = makeStyles({
link: {
color: 'white',
position: 'relative',
'&:before': {
content: "''",
position: 'absolute',
width: '0',
height: '2px',
bottom: '-3px',
left: '50%',
transform: 'translate(-50%,0%)',
backgroundColor: 'red',
visibility: 'hidden',
transition: 'all 0.3s ease-in-out',
},
'&:hover:before': {
visibility: 'visible',
width: '100%',
},
},
});
<Link underline="never" className={classes.link}>
<Typography component="span">link</Typography>
</Link>
Some explanation why your code didn't work:
Change content: "" to content: "''". Related answer.
Add underline="never" to Link to remove the built-in underline in the anchor element when hovering.
Change the Typography's root component to span or set its display to inline to make the container width and the underline width match the text content.
Change &:before:hover to &:hover:before: The former means hover the underline to run the animation, but its width is 0 so it can't be hovered, the latter means hover the link to run the line animation.
Add these 2 lines to make the underline expands from the middle:
left: '50%',
transform: 'translate(-50%,0%)',
I have spent hours trying to find the right combination to use Link and override the webkit underline to prevent the links in my navigation from having an underline without explicitly adding text-decoration: none to my global CSS. I had to add 'textDecoration: 'none' to the makeStyles function in this example and of course change red to blue but this works beautifully for my nav bar.
const useStyles = makeStyles({
link: {
color: 'white',
position: 'relative',
textDecoration: 'none',
'&:before': {
content: "''",
position: 'absolute',
width: '0',
height: '2px',
bottom: '-3px',
left: '50%',
transform: 'translate(-50%,0%)',
backgroundColor: 'blue',
visibility: 'hidden',
transition: 'all 0.3s ease-in-out',
},
'&:hover:before': {
visibility: 'visible',
width: '100%',
},
},
})
I have used a react-select for multiselect. Now I want to style it but not getting it.
const selectStyles = {
control: (base) => ({
...base,
fontSize: '16px',
fontWeight: 'bold',
borderRadius: '8px',
padding: '6px 5px',
border: '1px solid #21274F !important',
boxShadow: 'none',
'&:focus': {
border: '0 !important',
},
}),
}
<Select
placeholder='Type Team Name...'
value={getOptions(value)}
options={getOptions(data)}
onChange={(data) => setValue(data || [])}
styles={selectStyles}
isMulti
isClearable
isSearchable
/>
Its looking like this. I want to change the background-color to blue and text = white. How can I achieve this? please help.
EDIT: After applied #Manish Jangir code. It looking like this.
But I want the text ie. 'leadership' to appear white in color and on hover the appering red color on cross to be removed.
There are a lot of custom custom components to style the entire select. Have a look at this. You need to use multiValue component to style to change the styles of a single tag:
const selectStyles = {
control: (base) => ({
...base,
fontSize: '16px',
fontWeight: 'bold',
borderRadius: '8px',
padding: '6px 5px',
border: '1px solid #21274F !important',
boxShadow: 'none',
'&:focus': {
border: '0 !important',
},
}),
multiValue: (base) => ({
...base,
backgroundColor: 'blue',
color: 'white',
}),
}
It's been a while, but adding this here for who would have the same problem and wants to tackle it with custom components and custom styling.
I had the similar issue as well. Creating custom component like in docs and wrapping it around components.Option didn't give me the desired result in terms of styling.
After digging through, I found an example in react.select issues. So instead of creating custom component that wraps components.Option, you can now create your own component and pass in the props as you needed. This would also allow you to style the component with classes easily (in my case, it was Tailwind).
I want to create a button with a stripe on top that looks like it's going behind the button (image below).
I already solved this in pure CSS by using the ::after pseudo class. But I'm not sure how to do this in React. Any suggestions or help is appriciated.
There is a way by using glamorous div.
const IconDiamond = glamorous.div(
{
width: 0,
height: 0,
border: '50px solid transparent',
borderBottomColor: 'red',
position: 'relative',
top: '-50px',
'&::after': {
content: `''`,
position: 'absolute',
left: '-50px',
top: '50px',
width: '0',
height: '0',
border: '50px solid transparent',
borderTopColor: 'red',
}
},
)
Please note:
CSS properties must be camel-cased along the lines of react https://facebook.github.io/react/docs/dom-elements.html#style
when using the content property you need to ensure the quotes are included in the passed string ie content: ''`
the syntax for before and after pseudo elements is '&::before': { & '&::after': { https://github.com/paypal/glamorous#example-style-objects
Check this for more information: https://github.com/paypal/glamorous/issues/223
To learn more about glamorous div https://glamorous.rocks/basics
I am using Material UI Snackbar. I am not very new to Material UI but somehow I am unable to resolve the issue i.e., the snackbar is overlapping when it appears on top of the screen. I tried different ways to fix it but no luck.
Please find below Snackbar component and its body style. Also please find this screenshot:
bodyStyle:{
border: "2px solid #ffffff",
minWidth: '50%',
maxWidth: '100%',
flexGrow: 0,
height:'55px',
backgroundColor: 'transparent',
fontFamily: "Open Sans,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif",
fontStyle: 'normal',
fontWeight: 400,
fontSize: 16
}
snackbarfromTop: {
top: 0,
color: white,
bottom: 'auto',
}
<Snackbar
open={this.state.open}
message={this.state.error}
autoHideDuration={4000}
bodyStyle={myTheme.bodyStyle}
action="Close"
onRequestClose={this.handleRequestClose}
onActionTouchTap={this.handleRequestClose}
style={myTheme.snackbarfromTop}
/>
I had this problem using react and Material UI, when two snackbars where introduced, one was overlapping each other. I solved modifying the second child of the mui root snackbar in index.css
#root .MuiSnackbar-anchorOriginBottomCenter:nth-child(2){
bottom: 92px!important;
}
It obviously depends upon which position you choose for the snackbar, and tweak accordingly
From the screenshot alone, I can't tell 100%, but it seems you have just made your Snackbar transparent with:
backgroundColor: 'transparent'
So you are actually seeing through it.
To fix this, you should specify a backgroundColor to your component, or remove the 'transparent' override, such as:
backgroundColor: '#bada55'
You might want to look at the withStyles/withTheme HOC in order to declare your colors in one place and reuse them in different components, in which case you'll have something like this:
backgroundColor: theme.palette.my.predefined.color