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!
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"
}
}}
I'm using React with material-ui and have a menu component with a list, the last item in this menu is different from the others, I using :last-child and it is functional, the problem is when I try using :hover in that last element.
Style:
const useStyles = makeStyles((theme) => ({
menu: {
textDecoration: 'none',
color: theme.palette.navy.default,
cursor: 'pointer',
fontWeight: 'bold',
textTransform: 'uppercase',
'&:last-child': {
background: theme.palette.orange.default,
borderRadius: '5em',
color: theme.palette.white.default,
// using hover in the last child item not work
'&:hover': {
background: theme.palette.green.default,
},
},
},
}));
Component:
...
const classes = useStyles();
<MenuList>
{menu.map((item, index) => (
<MenuItem selected={false} key={index} className={classes.menu}>
{item.title}
</MenuItem>
))}
</MenuList>
Do you know how to solve it?
It can be done like,
menu: {
textDecoration: 'none',
color: theme.palette.navy.default,
cursor: 'pointer',
fontWeight: 'bold',
textTransform: 'uppercase',
'&:last-child': {
background: theme.palette.orange.default,
borderRadius: '5em',
color: theme.palette.white.default,
},
// using hover outside with the last child
'&:last-child:hover': {
background: theme.palette.green.default,
},
},
}));
I created a new component where I retested the options than did not work. I included #Sanish Joseph's answer that did not work previously and, this time with this new component, it worked.
In context, I created a menu mapping objects array and each object has another objects array with the submenus. I was discarding elements until I found the problem. In the Popper component that I use to display the submenus, there is a property called "disablePortal". This property was causing that "hover" in the "last-child" to not work.
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 have created a Stripe Elements card form on my website, but I'm having some trouble with it. Right now, it looks like this:
As you can see, the expiry and CVC inputs are squashed into one another.
If I fill them out, then the ZIP input is out of the frame.
It seems like this is because I have added letter-spacing to the placeholder element when defining the style for my card element.
var style = {
base: {
color: "#fff",
fontFamily: '"Source Sans Pro", sans-serif',
textTransform: "uppercase",
fontSize: '12px',
iconColor: "#bbb",
lineHeight: "37px",
maxHeight: "37px",
verticalAlign: "middle",
letterSpacing: "0.5px",
'::placeholder': {
color: '#bbb',
fontFamily: '"Source Sans Pro", sans-serif',
letterSpacing: "2px",
},
'::selection': {
color: '#fff',
backgroundColor: '#333',
}
}
};
Removing the letter-spacing from ::placeholder resolves the issue, but I would really like to keep it in order to align with the style of the rest of my website.
Does anyone know how I can resolve this?
Thanks.
It looks like this is the result of the mismatch between your main letterSpacing and ::placeholder letterSpacing values; if you make the base.letterSpacing value also 2px it seems to work (though it does temporarily push CVC off the side).