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"
}
}}
Related
This is my code:
const customStyles = {
header: {
style: {
textAlign: "left",
backgroundColor: "#fafafa",
borderBottom: "solid #eee 3px",
},
},
};
<DataTable
title="AMERICAN FOOTBALL FEDERATION"
data={data}
columns={columns}
customStyles={customStyles}
theme="standings_theme"
striped
/>
I am trying to make the title a bigger font and change the font weight. In the header: style: section, those styles get applied, and I can work example change the color of the title text, but I can't change anything relating to the font. When I inspect element the font-size for the title is crossed out. Adding !important to the styles doesn't work either.
Thanks for the help!
<Box style={{ padding: "20px" }}>
<Post post={post} setCurrentId={setCurrentId} />
</Box>
<Box sx={{ padding: "20px" }}>
<Post post={post} setCurrentId={setCurrentId} />
</Box>
React.js + Material UI
The above two examples do the same thing, one uses sx prop in material UI, the other is regular inline styling using css, so what is the point of "sx"? and should it always be used over style={{}} when using Material UI?
The sx prop is a shortcut for defining custom style that has access
to the theme
It can accept any CSS properties plus a few extra from MUI.
There are differences like :
shortHand: padding-top can be written as pt.
access to theme: If you define your theme in material UI, sx prop can directly access its properties like color.
Example from the doc :
import * as React from 'react';
import { Box, ThemeProvider, createTheme } from '#mui/system';
const theme = createTheme({
palette: {
background: {
paper: '#fff',
},
text: {
primary: '#173A5E',
secondary: '#46505A',
},
action: {
active: '#001E3C',
},
success: {
dark: '#009688',
},
},
});
export default function Example() {
return (
<ThemeProvider theme={theme}>
<Box
sx={{
bgcolor: 'background.paper',
boxShadow: 1,
borderRadius: 2,
p: 2,
minWidth: 300,
}}
>
<Box sx={{ color: 'text.secondary' }}>Sessions</Box>
<Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}>
98.3 K
</Box>
<Box
sx={{
color: 'success.dark',
display: 'inline',
fontWeight: 'bold',
mx: 0.5,
fontSize: 14,
}}
>
+18.77%
</Box>
<Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 14 }}>
vs. last week
</Box>
</Box>
</ThemeProvider>
);
}
Properties in sx object can have functions as valuse. These functions have access to theme too.
<Box sx={{ height: (theme) => theme.spacing(10) }} />
Grid properties: gap, rowGap and columnGap are available in sx.
Responsive styles: You can define properties according to the different MUI device size shorthands:
borderColor : { xs: "red", sm: "green" },
Access to child components: You can change styles of chlid components using nested styles:
<TextField
variant="outlined"
sx={{
'& .MuiInputBase-input': {
color: 'white',
},
}}
/>
Much more than CSS: The sx prop also supports CSS syntax including child and pseudo-selectors, media queries etc.
Eg:
<Box
sx={{
// some styles
":hover": { //psuedo-selectors
boxShadow: 6,
},
'#media print': { //media-queries
width: 300,
},
}}
>
Sources:
1.
2.
The sx props allows you to use all the mui system properties along with CSS properites.
with style={{}} aproch you add the CSS properties directly but you cannot use the mui properties in it. e.g. theme properties.
with SX props: you can set color in theme once. then use same color in all your app. then in future you want to change color you can change it in theme only once and it will apply to all the app automatically.
sx={{ color: 'primary.main' }}
with Style: but then you have to remember exact colorcode while coding your app and then in future if you decided to change you have to change everywhere in app.
style={{ color: '#00ff00' }}
also some CSS properties you can directly add to components.
e.g.
<Box height="100px" >... </Box> is same as
<Box sx={{height: '100px'}}>...</Box>
check below pages for more details.
https://mui.com/system/basics/#all-inclusive
https://mui.com/system/the-sx-prop/
Stripe React elements' placeholders have an Opacity: 1 CSS property, that cannot be changed using the style object. Other ::placeholder CSS properties can be changed.
Style object:
const iframeStyles = {
base: {
color: "#276678", //$blue
fontSize: "30px",
lineHeight: "38px",
fontFamily: "Lato",
fontWeight: 400,
"::placeholder": {
color: "#C8D7DE", //$bluepastel
opacity: 0,
}
},
invalid: {
},
complete: {
}
};
Firefox inspect output:
I have tried !important, but it didn't work. The opacity prop just doesn't apply. Is there any workaround to solve this issue?
Stripe.js' styling api limits which css properties you can modify. You cannot set opacity. They probably don't want you to make anything disappear. The documentation lists which css properties you may override.
https://stripe.com/docs/js/appendix/style
You could try adding 00 to the color value instead. This will turn the color code to rgba, and the two last hex digits is the opacity of the color.
color: "#C8D7DE00", //$bluepastel (invisible)
if you are using card for Stripe in React Native so you can add this for Placeholder Color.
cardStyle={{
textColor: '#000000', // use this actual Text
placeholderColor: '#A9A9A9' // use this for Placeholder
}}
Full code for card Field.
<CardField
postalCodeEnabled={false}
placeholders={{
number: '4242 4242 4242 4242',
}}
cardStyle={{
textColor: '#000000', // use this actual Text
placeholderColor: '#A9A9A9' // use this for Placeholder
}}
style={{
width: '100%',
height: 50,
marginVertical: 30,
}}
onCardChange={cardDetails => {
fetchCardDetails(cardDetails)
}}
onFocus={focusedField => {
}}
/>
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} />;
I need to put a borderColor in my InputBase in my react material. I tried to do the code below and it still doesn't appear.
I've prepared a codesandbox link
CODE
import palette from "../palette";
export default {
focused: {
borderColor: palette.primary.main,
borderWidth: 10
}
};
If you see the console, there is an issue with the specificity. So make sure to put the style for focus inside the root
working demo
refactored code
root: {
border: "2px solid blue",
"&$focused": { //<---- see here
borderColor: palette.primary.main,
// borderColor: 'green',
borderWidth: 10
}
}
// focused: { // this is wrong. Remove this block of code
// borderColor: palette.primary.main,
// borderWidth: 10
// }
};
Edit: Based on comment.....
If you are applying styles normally, then you can simply use focused for InputBase in makeStyles.
Working demo 2
const useStyles = makeStyles(theme => ({
root: {
padding: "2px 18px",
display: "flex",
alignItems: "center",
width: 400
},
focused: { //<---- see here
backgroundColor: "red",
borderColor: "2px solid green",
borderWidth: 10
},
usage
<InputBase
classes={{ root: classes.root, focused: classes.focused }}
placeholder="Search Google Maps"
inputProps={{ "aria-label": "search google maps" }}
/>
Your import for MuiInputBase is missing from index.js file in the code sandbox link. Plus, your css settings for MUIInputBase is incorrect. You should wrap the css object in an input container and set a border property before adding borderColor and borderWidth.
// Example setting
input {
"&:focus": {
border: "1px solid pink"
}
}