How do I refer to the specific tags in the Adyen component in my css?
import AdyenCheckout from '#adyen/adyen-web';
import '#adyen/adyen-web/dist/adyen.css';
For example, this button
This is inside my
<div id="component-container"></div>
You can provide css rules that refer to the class you want to change, such as adyen-checkout__button to apply settings for any button created by adyen components or adyen-checkout__button--pay to change the pay button specifically.
Adyen provides a list of css classes.
For card fields, these use iframes to gather details and styling information has to provided when initializing the adyen component.
const checkout = new AdyenCheckout({
paymentMethodsResponse: paymentMethodsResponse,
clientKey: adyenClientKey,
paymentMethodsConfiguration: {
card: {
styles: {
base: {
color: 'black',
fontSize: '16px',
fontSmoothing: 'antialiased',
fontFamily: 'Helvetica',
},
error: {
color: 'red',
},
},
},
},
...
});
Related
I'm not sure if this is possible but I don't know how to affect the scoped styles of a component inside another component.
We have the following components:
#Component({
tag: "gov-button",
styleUrl: "gov-button.scss",
shadow: false,
scoped: true
})
export class GovButton {
render() {
return (
<button class="element">
<slot name="left-icon"></slot>
<slot />
<slot name="right-icon"> </slot>
</button>
)
}
}
button.element {
slot::slotted(gov-icon) {
font-size: 3rem;
}
}
#Component({
tag: "gov-icon",
styleUrl: "gov-icon.scss",
shadow: false,
scoped: true
})
export class GovIcon {
render() {
return (
<span aria-hidden="true" class={this.name}></span>
)
}
}
span {
font-size: 1rem;
}
S následujícím použití
<gov-button variant="primary" size="small">
<gov-icon slot="left-icon" name="lightbulb"></gov-icon>
Small Primary
<gov-icon slot="right-icon" name="question"></gov-icon>
</gov-button>
I would like to affect the appearance of the gov-icon component in the gov-button.scss stylesheet, which is inserted into the gov-button component via a slot.
Unfortunately, with no selector I am not able to affect its appearance and I am not sure if it is even possible.
Thank you for help
I think this is because technically there are no slots in the Light DOM and Stencil only "emulates" them when scoped is on. Scoped CSS in Stencil means adding CSS classes based on component name (sc-gov-button and sc-gov-icon in your case) to your markup and modifying CSS selectors accordingly so they are "scoped" to these classes. This is why this doesn't work:
button.element {
slot::slotted(gov-icon) {
font-size: 3rem;
}
}
As a workaround, you can use the scoped icon selector in your button CSS instead:
.sc-gov-icon {
font-size: 3rem;
}
Of course it has its drawbacks such as that you need to update them when you change component names.
Take a look how they use scoped in Ionic - they use it only for a few components where they don't want Shadow DOM for performance reasons.
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
I was trying to use a npm package which has a Typography element from Material UI. This is written by me.
When I try to use it in a project, the typography css class properties override the custom css properties. An example is margin which is present in both the CSS classes but in some scenarios I see the margin of "MuiTypography-h1" overriding the custom css. How do I prevent this?
My general idea is custom CSS properties should always take precedence over MUI default CSS class properties. How can I make this happen ?
<Typography
variant="h1"
sx={{
width: '235px',
height: '96px',
fontSize: '20px',
fontWeight: 500,
lineHeight: '1.2',
color: 'primary',
textOverflow: 'ellipses',
overflow: 'hidden',
display: '-webkit-box',
WebkitLineClamp: 4,
WebkitBoxOrient: 'vertical',
marginTop: '11px',
}}
>
Title
</Typography>
Straight forward way to do: 🚀
you can directly override the MUI component with your custom CSS properties using the class name in your CSS file, for example in if you want to change the Button component's style, you can do this by applying your required CSS properties to "css-element-class-name" class on your "CSS" file as follows
.css-elemet-class-name{
color: yellow;
height: 25px;
padding: 15px;
}
I've found that, MUI theme should be created in order to override MUI--root properties with your css styles, so try somethins like this:
add your custome styles inside overrides:{}
const theme = createTheme({
overrides: {
MuiTypography: {
h1: {
'&.MuiTypography-gutterBottom': {
marginBottom: 7,
},
},
h2: {
marginBottom: props => (props.gutterBottom ? 20 : null),
},
},
},
});
and for the imports
import createtheme from '#material-ui/core/styles'
if you are using this version:
"#material-ui/styles": "^4.11.2",
I am trying to overwrite the css of MuiPrivateTabScrollButton.
but this class is generated from material ui so I am not able to overwite.
even I debugged by putting border colors and find out the fix, but still I am not able to findout.
all my code is in tab-demo.js
Can you tell me how to fix it, so that in future I will fix it myself.
providing my code snippet and sandbox below
https://codesandbox.io/s/n5l8znn2y0
update 1: removed unnecessary code for easy debugging https://codesandbox.io/s/8xw88yl9j0
MuiPrivateTabScrollButton: {
width: "0 !important"
},
tabRoot: {
textTransform: "initial",
width: "stretch",
display: "flex",
flex: 1,
border: "1px solid red",
"&:hover": {
color: "red",
opacity: 1,
textTransform: "initial"
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium,
textTransform: "capitalize"
},
"&:focus": {
color: "red",
textTransform: "capitalize"
}
},
In the documentation for each Material-UI component is a CSS section that indicates the classes that can be passed in to control CSS for different aspects. Here is that documentation for Tabs.
In particular you care about:
scrollButtons Styles applied to the ScrollButtonComponent component.
You then need to specify the appropriate class via the classes property.
For instance if you have the following in the styles passed to withStyles:
const styles = theme => ({
tabsScrollButton: {
backgroundColor: "green"
}
};
Then you would leverage that class like the following:
<Tabs
classes={{ scrollButtons: props.classes.tabsScrollButton }}
>
This question already has answers here:
CSS pseudo elements in React
(8 answers)
Closed 5 years ago.
I need to apply some CSS rules to ::before and ::after, but I can't figure out how.
I tried passing inline styles to my component like this (using JSX):
const color: '#fff';
const style = {
'::before': { backgroundColor: color },
'::after': { backgroundColor: color },
};
<div style={ style }>
I tried other permutations as well, such as ':before', '&::before', before... nothing seems to work.
Is this even supported by React? If so, what's the right way of doing it using inline styles?
react's inline styles don't support css pseudo-classes. Or media queries. You could either write plain css, or use a lib for that https://github.com/styled-components/styled-components
You can style-loader to your webpack config.
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
This adds CSS to the DOM by injecting a style tag, when you import any css in your component.
import style from './file.css'