How to change font size in an Amplify list component?
I'm using Figma-built components in Amplify. The components here are card collections. What I want to do is change the font size for a particular field in one collection of cards. Here is what a close inspection of the page looks like (see below). The highlighted section is the area I want to change.
I tried this construct in my css file (below), but it has no effect.
.styled-text .amplify-flex .amplify-collection .amplify-collection-items .amplify-text {
font-size: 44px;
}
The way I am using .styled-text is as follows (below).
<KatsuKappoCardioCardCollection className="styled-text"/>
What am I doing wrong?
Solution
Since you're auto-generating the code with Amplify Studio, the best approach is most likely to override Amplify styles as documented here with the overrides prop:
https://amplify.aws/learn/courses/Fullstack-for-Frontend-Developers-e7319/lessons/9
- Trying to make a clickable navigation bar which can be clicked to close
- How to use background with linear gradient in Tailwind css
- Anchor links to start below the header which is fixed at the top
- Keep footer at bottom of page when page height dynamically changes using CSS
- What does the media="" attribute in the stylesheet HTML definition refer to?
- HTML CSS Fit image in fixed size
- Angular viewChild native scrollable CSS window layout quirks
- Detecting if an <option> has been selected in <select> using CSS
- Applying border-radius to bootstrap 5 table
- How to increase space between dotted border dots
- use multiple css filters at the same time?
- How exactly does link rel="preload" work?
- Difficulty implementing accordion effect in Angular project
- How to center Font Awesome icons horizontally?
- How to set div's height in css and html
- How to forward scrollbar from to column in css grid
- What's wrong with this ternary operator?
- How can i replicate this corner-border-radius trick to an image in my project
- Not able to display material ui snackbar in center
- different grid area while using grid-template-column
- Why does z-index not work?
- How do I make the background image start at the top of the page and not below my sticky header?
- How can I make a color wheel using CSS (with white at center and fading to black at the rim)?
- Logic to add vertical stepper lines
- Why isn't my CSS animation-timeline: view() working?
- Why the elapsedTime property of animation event is undefined
- htmx: Selecting multiple classes in hx-trigger
- How do I move a slide with a mouse and on my phone?
- Is it possible to start the border-bottom after x amount of pixels?
- Angular Material icons not showing