Hello I am new to using fluent ui and applying it to my react.
I am trying to align my tooltip with my textfield and trying to change background color to black and font to white. Also increasing the width and height of tooltipbox.
const inlineBlockStyle = (styleProps) => {
const chkStyles = {
root: [{
display: 'inline-block',
color: 'white',
backgroundColor: black,
height: '100px',
width: '500px,'
}],
};
return chkStyles
};
<TooltipHost
content="If your school is not on our list, please go to the Support Page
and provide your schools details.
id={tooltip2Id}
calloutProps={calloutProps}
styles={inlineBlockStyle}
>
<Label style={{ color: "white", fontSize: "20px" }}>
Please select your county and your school
<i className="ms-Icon ms-Icon--Info" </i>
</Label>
</TooltipHost>
const styleProps= {
rootHovered: {
backgroundColor: "black"
}
};
//
<FluentPrimaryButton text = {label} styles = {styleProps} />;
Related
I am using the MUI-Slider component in React to display a value. I would like to customize the 'thumb'/valueLabel so the font and thumb are much larger. I read MUI's documentation on updating the CSS to customize the thumb with limited success. My slider looks like this currently. The thumb and dot are blue, but everything else is grey. The font is still very small.
Here is my React component:
Note: the sx usage is copied directly from the MUI documentation.
import { Slider } from '#material-ui/core';
<Slider
disabled
min={0}
max={100}
value={50}
marks={[
{ value: 0, label: '0' },
{ value: 100, label: '100' },
]}
aria-label="Conviction Score"
color="primary"
sx={{
'& .MuiSlider-thumb': {
borderRadius: '1px',
},
}}
valueLabelDisplay="on"
orientation="vertical"
valueLabelFormat={value => `${value.toFixed(1)}`}
></Slider>
I added this to my SCSS. Clearly I can change the thumb color but not any of the font attributes.
color:#0d47a1;
font-size: 20px !important;
font-weight: bold !important;
}
What am I doing wrong? Is there any way I can do this with just CSS?
Use this in your sx in the Slider component to replace the one you have now.
sx={{
"& .MuiSlider-thumb": {
borderRadius: "1px"
},
"& .MuiSlider-valueLabelLabel": {
fontSize: "20px",
fontWeight: "bold",
color: "#0d47a1"
}
}}
Have looked at other examples and trying to do the same thing but not sure why my code is not working. I have code which loops through some keys and renders a div. I want to conditionally apply some styles based on whether the key is even or odd. Example:
<div className={parseInt(key) % 2 === 0 ? 'label1' : 'label2' }>
<span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>
The styles are accessible in the same file and look something like:
# Material UI
const useStyles = makeStyles((theme) => ({
label1: {
width: "50px",
height: "16px",
top: "458px",
background: "yellow",
fontSize: "12px",
},
label2: {
width: "50px",
height: "16px",
top: "458px",
background: "red",
fontSize: "12px",
},
}));
What am I doing wrong? Currently no style is getting applied to the div
You need to use the classes from the material ui useStyles hook.
const classes = useStyles()
....
<div className={parseInt(key) % 2 === 0 ? classes.label1 : classes.label2 }>
<span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>
Check the useStyles hook api: https://material-ui.com/styles/basics/
If you have a class component and you can use hooks then you can do it with the withStyles higher order component, like this example:
import { withStyles } from "#material-ui/core/styles"
const styles = theme => ({
label1: {
backgroundColor: "red",
},
label2: {
backgroundColor: "red",
},
})
class ClassComponent extends Component {
state = {
searchNodes: "",
}
render() {
const { classes } = this.props
return (
<div className={parseInt(key) % 2 === 0 ? classes.label1 : classes.label2}>
<span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>
)
}
}
export default withStyles(styles, { withTheme: true })(ClassComponent)
I would like to add a custom style for Material UI tooltip arrow but I can not set the border color and the background color.
This is the configuration I have - react:
const useStylesBootstrap = makeStyles(theme => ({
arrow: {
// color: '#E6E8ED',
border: '1px solid #E6E8ED',
},
tooltip: {
backgroundColor: theme.palette.common.white,
border: '1px solid #E6E8ED',
color: '#4A4A4A'
},
}));
This is what I want to achieve:
I want to apply a gray color in the triangle border and the background will be white.
On the arrow configuration, the border config will not work, it will apply a border color in the square that's housing the triangle. Without material UI, the issue could be solved using the pseudo :before and :after to achieve the desired output. I would like to know if there is a solution to this using material UI custom configuration. Not too familiar with Material UI, your help will be appreciated
You are right, You need to override &:before pseudoselector like this.
Here is the code sandbox project link
import React from "react";
import Button from "#material-ui/core/Button";
import Tooltip from "#material-ui/core/Tooltip";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
arrow: {
"&:before": {
border: "1px solid #E6E8ED"
},
color: theme.palette.common.white
},
tooltip: {
backgroundColor: theme.palette.common.white,
border: "1px solid #E6E8ED",
color: "#4A4A4A"
}
}));
export default function ArrowTooltips() {
let classes = useStyles();
return (
<Tooltip
title="Add"
arrow
classes={{ arrow: classes.arrow, tooltip: classes.tooltip }}
>
<Button>Arrow</Button>
</Tooltip>
);
}
See tooltip css. Use arrow and &::before to target the arrow and apply your styles. (note the double :: there)
makeStyles - style
arrow: {
fontSize: 20,
color: "#4A4A4A",
"&::before": {
backgroundColor: "blue",
border: "2px solid red"
}
}
JSX
<Tooltip classes={{ arrow: classes.arrow }} title="Delete" arrow>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
Working demo
FYI on material ui 5 makestyles is deprecated.
Because tooltip is in portal you cannot style it directly
const StyledTooltip = styled<typeof Tooltip>(({ className, ...props }) => (
<Tooltip {...props} classes={{ popper: className }} />
))``;
then in reder function you can use sx, by setting popper you can access child props via sx
<StyledTooltip
open
arrow
sx={{
'& .MuiTooltip-arrow': {
background: 'red',
},
}}
/>
Using the official MUI customization examples:
https://mui.com/material-ui/react-tooltip/#customization
const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
[`& .${tooltipClasses.arrow}`]: {
color: theme.palette.common.white,
"&::before": {
backgroundColor: theme.palette.common.white,
border: "1px solid #999"
}
},
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}));
We can do a custom styling in the following way
import Tooltip from '#material-ui/core/Tooltip'
import { withStyles } from '#material-ui/core/styles'
const HtmlTooltip = withStyles(theme => ({
arrow: {
'&::before': {
color: 'white'
}
},
tooltip: {
backgroundColor: '#f5f5f9',
boxShadow: theme.shadows[8],
color: 'rgba(0, 0, 0, 0.87)',
fontSize: 14,
maxWidth: 800,
padding: 0,
},
tooltipPlacementTop: {
margin: '4px 0',
},
}))(Tooltip)
<HtmlTooltip
title={
<React.Fragment>
<Typography color="inherit">Tooltip with HTML</Typography>
<em>{"And here's"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}
{"It's very engaging. Right?"}
</React.Fragment>
}
>
<Button>HTML</Button>
</HtmlTooltip>
Question
I am trying to convert some of my jQuery projects over to use ReactJS. I would like to add/remove individual classes for background color, border, shape, size, etc. I want to be able to use many options (like 20 colors). If I add a background color, I want to remove the current background color without removing the current border, shape, or size classes. Is there a way to do this?
Research
I have read many posts on altering the buttons on hover, on toggling a class on/off, and changing out one class for another, but these have not pointed me in the right direction.
Image
More Details
If I click the bg_blue button, I would like the background to change without loosing the red border.
If I click the border_gray button, I would like it to change without loosing the current background color.
Start Code
import React from 'react';
var classNames = require( 'classnames' );
export class Body extends React.Component {
render() {
const red = {
backgroundColor: "red"
};
const gray = {
backgroundColor: "gray"
};
const blue = {
backgroundColor: "blue"
};
const border_red = {
borderWidth: 3,
borderColor: "red",
borderStyle: "solid"
};
const border_gray = {
borderWidth: 3,
borderColor: "gray",
borderStyle: "solid"
};
const border_blue = {
borderWidth: 3,
borderColor: "blue",
borderStyle: "solid"
};
return (
<div className="App-body">
<div className="start-shape" style= {border_red} ></div>
<button className="button" onClick="">bg_Red</button>
<button className="button">bg_Gray</button>
<button className="button">bg_Blue</button>
<button className="button">border_Red</button>
<button className="button">border_Gray</button>
<button className="button">border_Blue</button>
</div>
);
}
}
Here you go :
//intial style
state = {
borderWidth: 3,
borderColor: "red",
borderStyle: "solid"
};
// then just update/overwrite with new one
setStyle(new_style) {
this.setState(state => ({ ...state, ...new_style }));
}
// by click and passing the values
onClick={() => this.setStyle(gray)}
Here you check the code by running the code snippet :
class App extends React.Component {
state = {
borderWidth: 3,
borderColor: "red",
borderStyle: "solid"
};
setStyle(new_style) {
this.setState(state => ({ ...state, ...new_style }));
}
render() {
const red = {
backgroundColor: "red"
};
const gray = {
backgroundColor: "gray"
};
const blue = {
backgroundColor: "blue"
};
const border_red = {
borderWidth: 3,
borderColor: "red",
borderStyle: "solid"
};
const border_gray = {
borderWidth: 3,
borderColor: "gray",
borderStyle: "solid"
};
const border_blue = {
borderWidth: 3,
borderColor: "blue",
borderStyle: "solid"
};
return (
<div className="App-body">
<div className="start-shape" style={this.state} />
<button className="button" onClick={() => this.setStyle(red)}>
bg_Red
</button>
<button className="button" onClick={() => this.setStyle(gray)}>
bg_Gray
</button>
<button className="button" onClick={() => this.setStyle(blue)}>
bg_Blue
</button>
<button className="button" onClick={() => this.setStyle(border_red)}>
border_Red
</button>
<button className="button" onClick={() => this.setStyle(border_gray)}>
border_Gray
</button>
<button className="button" onClick={() => this.setStyle(border_blue)}>
border_Blue
</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('react-root'));
.start-shape {
padding : 50px;
width: 50px;
}
.button {
display: inline-block;
margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>
so you need to understand that onClick event should change the state of the component.
to add state add a constructor with initialState to class:
constructor(props){
super(props);
this.state = {
style: {}
}
}
then you need to add a function which will handle click event which will set the next state:
handleOnClick = (style) => {
// style = { <css properties>}
this.setState({style})
}
now that your click handler and state is in place, you just need to call the handler on click event with the next state you want.
<button className="button" onClick={()=>handleOnClick(bg_Red)}>bg_Red</button>
lastly, bind that latest state with the div as:
<div className="start-shape" style={this.state.style} ></div>
I'm using React Material Autocomplete fields in my project that has a nested TextField. I've currently applied standard styles to it (when no value is present and just the label is showing in the field), and also different styles on hover. However, I want the same hover styles to be applied to the whole Autocomplete box (not just the TextField element) if the TextField has a value in it, but I'm unable to figure out how to do this. My Autocomplete code and current CSS styles are below. Please could anybody help and let me know how I can do this?
Autocomplete Code
const renderComponentList = (componentList, isDisabled, name, label) => (
componentList &&
<Autocomplete
classes={{
root: classes.root,
}}
options={componentList}
disabled={isDisabled}
name={name}
getOptionLabel={(option) => option.name}
onChange={
(event, value, reason) => {
this.handleAutocompleteChange(name, value);
}
}
style={{width: '100%'}}
renderInput={
(params) =>
<TextField
{...params}
name={name}
label={label}
variant="outlined"
/>
}
/>
);
CSS Styles
export const styles = theme => ({
// Autocomplete option styles
root: {
color: '#FFFFFF',
backgroundColor: '#303039',
opacity: 0.6,
"&:hover": {
backgroundColor: '#1E1E24',
borderRadius: '5px',
opacity: 1,
},
"&:focus-within": {
backgroundColor: '#1E1E24',
borderRadius: '5px',
opacity: 1,
},
// Something like this to style the autocomplete when input has a value, but this only
// targets the input field (TextField) rather than the whole Autocomplete field
// "& input[value]:not([value=''])": {
// backgroundColor: '#1E1E24',
// borderRadius: '5px',
// opacity: 1,
// },
"& .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
"&:hover .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
borderRadius: '5px 5px 0 0',
},
"& .MuiInputLabel-outlined": {
color: '#FFFFFF',
},
"& .Mui-disabled": {
opacity: 0.6,
},
"& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
border: '1px solid #484850',
},
},
});
I've managed to resolve the issue. I had to create a new class for the desired style when a value was present and conditionally render it in the Autcomplete element, based on the relevant state.
To conditionally render the class, I had to pass in stateVal as one of the props in my function and then change the root line in the Autocomplete classes property to root: stateVal ? classes.rootHasVal : classes.rootHasNoVal, instead.