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 => {
}}
/>
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!
I'm trying to show more details and scale a component when hovered, but it displaces the surrounding components in doing so.
See screenshot:
Here's the sx I assigned to an MUI Box and Card.
const ctCardHoveredSx = {
maxWidth: 300,
'& .ct-card-toggle': {
display: 'none'
},
'&:hover .ct-card-toggle': {
display: 'flex'
},
'& .ct-card': {
transition: 'transform 0.15s ease-in-out',
boxShadow: 'none'
},
'&:hover .ct-card': {
transform: 'scale3d(1.25, 1.25, 1)',
boxShadow: '5',
zIndex: 2
}
};
Tech Stack:
NextJS
MUI
React
I think you need to use overflow hidden in the parent div and it will not displace the thing and hover will just get scale inside the same div.
Please let me know if you find any issues.
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 Want to change background color based on child element in HEX
example:
render() {
return (
...
<span>
<h3 style={{ color: item.color }}>Item Color</h3>
</span>
...
}
i have tried mixBlendMode (mix-blend-mode) but this does the reverse of what I am asking,
So if the h3 color is white, and the span backgroundColor is white, i want to change it to black, and the reverse for black, if color=black then background is white
is there any offical CSS way to do this?
and if there any alternative (using JS to detect color from HEX)
if color=white then bgColor=black
if color=black then bgColor=white
(and so for other colors)
There's probably an easier way of doing this, but here's a solution I came up with:
First add a ref tag to the element you want to watch:
<h3 ref={"tag"} style={{ color: item.color }}>Item Color</h3
Than use lifecycle methods to keep track of the color and set that in state in React:
componentDidMount() {
let taggedColor = window.getComputedStyle(this.refs.tag);
this.setState({
taggedColor: taggedColor.color
});
}
componentDidUpdate() {
let taggedColor = window.getComputedStyle(this.refs.tag);
if (taggedColor.color !== this.state.taggedColor) {
this.setState({
taggedColor: taggedColor.color
});
}
}
getComputedStyle converts the HEX to RGB, so now in your span use a conditional based on the RGB :
<span
style={
this.state.taggedColor === "rgb(17, 17, 17)"
? { backgroundColor: "#fff" }
: { backgroundColor: "#111" }
}
className="App"
>
<h3 ref={"tag"} style={{ color: item.color }}>Item Color</h3
</span>
Again I'm sure there's an easier way of doing it but this is what I came up with.
I'm trying to apply some reasonably simple styles to my <Dialog> component. In this case, I am trying to round the corners with a border radius. Here are some simple inline styles that I'd like to use to override the default <Dialog> styles:
let overrideStyles = {
padding: 0,
margin: 0,
borderRadiusTopLeft: '4px',
borderRadiusTopRight: '4px',
};
<Dialog> provides a wide variety of possibilities for overriding internal styles. These include bodyStyle, contentStyle, style, titleStyle, overlayStyle, and actionsContainerStyle. I decided to try to apply these styles to each one.
<Dialog
bodyStyle={overrideStyles}
contentStyle={overrideStyles}
style={overrideStyles}
titleStyle={overrideStyles}
overlayStyle={overrideStyles}
actionsContainerStyle={overrideStyles}
modal={overrideStyles}
>
<TestPanel/>
</Dialog>
When I render my TestPanel, it ends up looking like this:
Notice the corners, where my border radius has not been applied... I opened up the inspector and noticed the following div:
If I apply the border radius styling to the highlighted div, the dialog will have its corners rounded as expected. Which leads me to my question...
How do I override the styles of Material UI's <Dialog> component to apply rounded corners as my CSS is attempting?
I solved it with paperProps property.
<Dialog PaperProps={{
style: { borderRadius: 2 } }}
> .... </Dialog>
This perfeclty worked for me
You can override styles like below.
const styles = {
root: { }
paper: { borderRadius: 15 }
}
// ...
<Dialog classes={{
root: classes.root,
paper: classes.paper
}}>
</Dialog>
Unfortunately, Material UI isn't supremely style-friendly. In this case, there's no prop you can override to change the border-radius, so we've got to apply our own class:
let headerStyles = {
color: 'white',
textAlign: 'center',
fontSize: 24,
backgroundColor: '#3B8DBC',
padding: 20,
borderTopLeftRadius: 4,
borderTopRightRadius: 4
};
let bodyStyles = {
backgroundColor: 'white',
padding: 10,
height: 200
};
<Dialog className='test'>
<div style={headerStyles}>Testing</div>
<div style={bodyStyles}>5:43pm</div>
</Dialog>
Then style that class, and, yes, the border-radius has to be set on both of the below CSS classes as well as the TestPanel header:
/* Some rules use !important because Material UI sets them by default */
.test > div > div {
background-color: #3B8DBC; /* Same background-color as TestPanel */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.test > div > div > div {
/* Not overriding the color and border radius here too result in your changes
not being visible. */
background-color: inherit !important;
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.test > div > div > div > div {
/* This div is the topmost padding between the modal content and the edge
of the modal */
padding: 0 !important;
}
This ends up looking like what you want:
screenshot here
Hope this helps!
You can override <Dialog /> styles globally in your application when creating your theme object. The paper key of MuiDialog will let you target the border-radius.
const theme = createMuiTheme({
overrides: {
MuiDialog: {
paper: {
borderTopLeftRadius: '4px',
borderTopRightRadius: '4px'
}
}
}
})
Dialog - CSS api
Material UI Theming
The first answer is not working for me. I tried this and it work perfect for me:
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
width: "100%",
maxWidth: "740px",
borderRadius: "8px"
}
},
}}