@BrentAshWilliams wrote:
Hi,
I am in the process of porting my app from ionic 3 to ionic 4. I use D3 for the creation of a meter. None of the styling is working. The entire meter is black. I am assuming it has something to do with lazy loading / shadow DOM.
The html is as follows:
<ion-header> <ion-toolbar> <ion-title>meter</ion-title> </ion-toolbar> </ion-header> <ion-content> <div #battery></div> </ion-content>This part of the code is for adding two posts to the top of the meter and where I try to add a scss class ‘battery-post’ to it:
og.selectAll('rect') .data([0.20, 0.80]) .enter().append('rect') .attr('class', 'battery-post') .attr('x', function (d) { return rect.x + rect.width * d - config.postWidth / 2; }) .attr('y', rect.y - config.postHeight) .attr('width', config.postWidth) .attr('height', config.postHeight) .attr('rx', config.postRx);This is one of the scss classes for the two posts part of the meter at the top:
.battery-post { fill: 'var(--ion-color-success)'; }And here is the result - all black. I highlighted the html for the two posts at the top where the rect has the battery-post on it which should fill the posts with -ion-color-success but it stays black:
<rect class="battery-post" x="226.3" y="2" width="25" height="8" rx="4"></rect>Any thoughts or help on how to get the styling working would be great.
Thanks,
Brent
Posts: 4
Participants: 2
