LWC related list styling

Question

I added a title to my related list but a white box is appearing on the grey theme I added. What is the simplest way to solve this issue. Should I not use lightning-card to display my title? Also How can we add an items, sorted by and updated subtitle?(like shown in the second picture)

<template>
    
    <div class="slds-box slds-theme_shade">
        <lightning-card title="Opportunity" icon-name="standard:opportunity"></lightning-card>
            <div class="slds-grid slds-gutters slds-p-bottom_x-small slds-p-left_x-small">
            <lightning-input type="search" onchange={handleSearch}></lightning-input></div></div>
    
        <div class="slds-scrollable" style="height:400px; width: auto" >
             <lightning-datatable
                 data={opportunities} 
                 columns={cols} 
                 key-field="id" 
                 onrowselection={handleRowSelection} 
                 onrowaction={handleRowAction} 
                 show-row-number-column="true" 
                 sorted-by={sortBy}
                 sorted-direction={sortDirection}
                 onsort={handleSortAccountData}
                 hide-checkbox-column="true">
                 
                </lightning-datatable>
        </div>
         
    
 
</template>

import { LightningElement, api, track, wire } from 'lwc';
import getopportunities from '@salesforce/apex/oppcontrol.getopportunities';
import { NavigationMixin } from 'lightning/navigation';
import { refreshApex } from '@salesforce/apex'


const Columns = [
    {label: 'Opp Name', fieldName: 'link', type: 'url', typeAttributes: {label: {fieldName: 'Name'}}, sortable: "true"},
    {label: 'Account Name', fieldName: 'accountlink', type: 'url', typeAttributes:{label: {fieldName: 'Account_Name'}}, sortable: "true"},
    {label: 'End User',fieldName: 'End_User_link', type: 'url', typeAttributes:{label: {fieldName: 'End_User__c'}}, sortable: "true"},
    {label: 'Amount', fieldName: 'Amount', type: 'currency', sortable: "true"},
    {label: 'Close Date', fieldName: 'CloseDate', sortable: "true"},
    {label: 'Stage Name', fieldName: 'StageName', sortable: "true"},
    {label: 'Market', fieldName: 'Market__c', sortable: "true"},
    {label: 'Industry', fieldName: 'Industry__c', sortable: "true"},
    {label: 'Segment', fieldName: 'Segment__c', sortable: "true"},
    {label: 'Transaction Type', fieldName: 'Transaction_Type__c', sortable: "true"}
    ]

export default class Finalopp extends NavigationMixin(LightningElement) {
    @api recordId;
    @track sortBy;
    @track sortDirection;   
    @track opportunities;
    error;
    @track cols=Columns;
    wiredOpp;
    rowLimit =20;
    rowOffSet =0;
    baseData;
    @wire(getopportunities, {val: '$recordId'}, {limitSize: this.rowLimit}, {offset: this.rowOffSet})
    wiredOpp({error, data}){
        if(data){
           this.opportunities = data.map((row) => {
            return this.mapOpp(row);
           })
        this.baseData = this.opportunities
        }
        else if(error){
            this.error = error;
            this.opportunities = undefined;
        }
        console.log(data);
        console.log(error);
    }

    mapOpp(row){
        console.log(row);
        var UserName = '';
        var Userlink = '';
        if (row.End_User__r.Id != undefined){
            UserName = `${row.End_User__r.Name}`
            Userlink = `/${row.End_User__r.Id}`
        }
        return{...row,
           Amount: `${row.Amount}`,
           StageName: `${row.StageName}`,
           Name: `${row.Name}`,
           link: `/${row.Id}`,
           End_User__c: UserName,
           End_User_link: Userlink,
           Account_Name: `${row.Account.Name}`,
           accountlink: `/${row.AccountId}` 


        };
    }

    handleSortAccountData(event) {       
        this.sortBy = event.detail.fieldName;       
        this.sortDirection = event.detail.sortDirection;       
        this.sortAccountData(event.detail.fieldName, event.detail.sortDirection);
    }


    sortAccountData(fieldname, direction) {
        
        let parseData = JSON.parse(JSON.stringify(this.opportunities));
       
        let keyValue = (a) => {
            return a[fieldname];
        };


       let isReverse = direction === 'asc' ? 1: -1;


           parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; 
            y = keyValue(y) ? keyValue(y) : '';
           
            return isReverse * ((x > y) - (y > x));
        });
        
        this.opportunities = parseData;


     
     }
     handleSearch(event){
        var searchTerm = event.target.value.toLowerCase();
        this.opportunities = this.baseData.filter((row) => {
            for (let field of Object.values(row)) {
                if (field && field.toString().toLowerCase().includes(searchTerm)) {
                    return true;
                }
            }
            return false;
        });
    }}

Answer 1

You can always check the underlying HTML of a component like "lightning-card" (using inspect in your browser) and try to mimic it using the classes they have. For example, try replacing the lightning-card tags (and their content) with the following snippet of code (made of HTML using classes taken from the Lightning Design System https://www.lightningdesignsystem.com/components/cards/):

    <div class="slds-card__header slds-grid slds-media slds-media_center slds-has-flexi-truncate">
        <div class="slds-media__figure"><lightning-icon size="small" icon-name="standard:opportunity" alternative-text="Approved" title="Approved"></lightning-icon></div>
        <h2 class="slds-card__header-title">Opportunity</h2>
    </div>

You should get something like this (it inherits the parent tag background).

Let me know if this helps!