CODEWITHSUNDEEP
reactjstypescript
Daniel Logvin
Daniel Logvin

Reputation: 502

How can I alter the CSS of an element that is not being shown as a component?

I'm trying to change the css proprieties of an element that does not have a component by itself. Let me explain:

I have this line:

<CanvasImage className="CanvasImage" id="CanvasImage" />

Now, on the element inspector I get this: 

<div class="CanvasImage sc-eXNvrr hJEowj" id="CanvasImage">
↓ I want to edit the line right below this comment ↓
<canvas width="1952" height="1002" style="width: 976px; height: 501px;"></canvas>
↑ This is what I want to edit ↑
</div>

The thing is that the only component I got is the one I told you before, how can I achieve this? I've tried to change the CSS of the component but the image is not being affected at all.

CSS

const CanvasImage = styled.div`
  width: fit-content;
  height: fit-content;
  (I want to add "border-radius 8px;" but does not work when I put it here!)
`;

Thanks in advance!

Upvotes: 0

Views: 53

Answers (1)

Taxel
Taxel

Reputation: 4207

You can just add canvas { ... } to your styled div. So your code should look like this:

const CanvasImage = styled.div`
  width: fit-content;
  height: fit-content;
  canvas {
    border-radius 8px;
  }
`;

For more info check out this

Upvotes: 2

Related Questions