styled-components: the parent's styles take precedence over the child's styles

Question

styled-components: the parent's styles take precedence over the child's styles

image

export const LogOutButton = styled.button`
  display: inline-block;
  ....
`;
export default styled(ThemedApp)`
  ....
  button {
    ....
    display: flex;
    ....
  }
`;

Upon inspection, it is evident that the Logout button (with class gBuhXv) has been given a style of display: flex instead of inline-block, due to the higher priority of its parent element (ThemedApp, .jCe...)

The CSS rule causing this effect is p.column { text-align: right; }, which can be overridden by

body p.column { text-align: left; }

since it is more specific in nature.

While this behavior is correct, it may not align with expectations. Is there a way to increase the priority of the Logout button's styling?

css reactjs styled-components

Answer 1

Answer №1

The issue at hand stemmed from

const globalStyles = styled.div`
p {
  color: ${props => props.theme.somecolor};
}
a {
  color: ${props => props.theme.somecolor};
}`

This approach with styled-components was incorrect.

Instead, the correct method involves defining components and extending them:

const P = styled.p`
  color: ${props => props.theme.somecolor};
`
const A = styled.A`
  color: ${props => props.theme.somecolor};
`
const CustomA = A.extend`
  color: mycolor;
`

Answer 2

The issue at hand stemmed from

const globalStyles = styled.div`
p {
  color: ${props => props.theme.somecolor};
}
a {
  color: ${props => props.theme.somecolor};
}`

This approach with styled-components was incorrect.

Instead, the correct method involves defining components and extending them:

const P = styled.p`
  color: ${props => props.theme.somecolor};
`
const A = styled.A`
  color: ${props => props.theme.somecolor};
`
const CustomA = A.extend`
  color: mycolor;
`

styled-components: the parent's styles take precedence over the child's styles

Answer №1

Similar questions

What is the reason that the index is consistently the final index when utilizing it to pass to a function while iterating over an array with map()?

Tips for defining CSS styles for the background color of <td> elements within a sitemap

Eliminating the admin-bar.php styling in a WordPress theme

Television Mount for Precise Video Placement

Tips for changing the navigation tab post authentication

What is the best way to trigger an event handler or method in a child component from its parent in React?

Adjust the font size of the immediate child element that belongs to the fs-5 class

Customize the drawer background in Vue Material

What are the reasons for the default router in Next Js not functioning properly?

What causes an infinite loop in my app when passing a prop, and why doesn't it update the prop as expected?

Having trouble with nextjs routes not displaying the Modal?

Loading CSS files conditionally in Angular2's index.html

How can you call a method in a ReactJS Component?

Adjusting picture dimensions with percentages in canvas and jquery

I am encountering difficulty in printing multiple documents from FireStore

The div element's width does not match the width of the textbox

Are `<text>` nodes unable to utilize ligature fonts in CSS/SVG?

Ways to use jQuery to disable row form elements in the second and third columns

Creating a Selectable Child Form in ReactJS that Sends Data to Parent Form

Utilizing NodeJS to dispatch emails through SendGrid