How to control LWC styling dynamically?

Question

I need different widths for my LWC for lightning and classic(lightning out) as my LWC is shooting out of card width in lightning.

I am able to know whether a user is in lightning or classic using wire and apex. How can I use it to dynamically control the width of LWC?

APEX

public with sharing class ThemeTest {
    @auraEnabled(cacheable=true)
    public static String getUIThemeDescription() {
        String theme = UserInfo.getUiThemeDisplayed();
        return theme;
    }
}

This is how I get the context. (I want to set the component width here)

    @wire(getUITheme) theme({error,data}){
        if(data==='Theme4d'){             
            this.isLightning=true; 
        }  
        if(error){             
            this.error1 = error; 
        }                     
    }

HTML

<div id="setWidth" class="slds-scrollable" style="height:20rem;width:66rem">
                    <lightning-datatable 
                        key-field="Id"
                        data={wrappers}
                        columns={columns}
                        onrowaction={navigateToRecordViewPage}
                        hide-checkbox-column="true">
                    </lightning-datatable>
                </div>
</div>

Answer 1

You can use flexipageRegionWidth.

Make a Component Width-Aware

When you add a component to a region on a page in the Lightning App Builder, use @api flexipageRegionWidth to pass the region’s width to the component. Then with some strategic CSS, you can tell the component to render in different ways in different regions at run time.

Valid CSS class values are SMALL, MEDIUM, and LARGE

JS:

import { LightningElement, api } from 'lwc';

export default class TestClass extends LightningElement {
    @api flexipageRegionWidth = 'CLASSIC'; // default to classic. If its lightning, framework will set the value
}

HTML:

<template>
   <div class={flexipageRegionWidth}>
       <datatable>
   </div>
</template>

CSS:

div .CLASSIC {
    width: 66rem;
    ...
}
div .LARGE {
    width: 40rem;
    ...
}
div .SMALL {
    width: 15rem;
    ...
}

Answer 2

You can use a template if:true={property} expression to show different divs based on logic.

Here's a trailhead tutorial.

Another example:

<template if:false={moveToNextPage}>
    <div class={tableClass}>

    </div>
</template>

---

  @api
    controlTableOff() {
        this.tableClass = 'slds-hide';
    }

Answer 3

The obvious solution is to stop using fixed width (you use 66rem) and to use min/max widths plus a standard width of 100% which will try to fill the width of the container by default.