CODEWITHSUNDEEP
cssreactjs
LA_
LA_

Reputation: 20409

How to change size of React component?

Here is the component I use - https://github.com/effectussoftware/react-custom-roulette/. I see that it limits the roulette size -

export const RouletteContainer = styled.div`
  width: 80vw;
  max-width: 445px;
  height: 80vw;
  max-height: 445px;
`;

I tried to overwrite it at App.css -

div .wheel { // also tried .RouletteContainer, .wheel
  max-width: 700px;
  max-height: 700px;
}

but it doesn't help.

The following I see in the console - enter image description here

Upvotes: 0

Views: 2378

Answers (1)

andy mccullough
andy mccullough

Reputation: 9541

try

.wheel > div:first-child {
  max-width: 700px;
  max-height: 700px;
}

from what I can tell, the style is applied to the div that is the child of .wheel ? If that targets the correct node but specificity is not high enough to override their styles, you may have to mark them as !important

:first-child is also just me guessing that the node will always be the first div, you can update this based on what their DOM node structure will actually be

Upvotes: 2

Related Questions