How to Add Borders to Table Rows (Including Expanded Rows) in Ant Design When CSS Overrides Don’t Work?

I’m working with an Ant Design table that includes expandable rows. The table works as expected, but I noticed that none of the rows (main or expanded) have borders, and I’d like to add borders to make the table more visually structured. However, I’m unsure how to do this without breaking the table layout or conflicting with Ant Design’s default styles.

The main table rows and the rows in the expanded nested table don’t have borders. I want to add borders to all rows (both main and expanded tables).

Here’s the code I’m using:

 return (
    <>
      <Row  className="margin-bottom-m" gutter={[0, 10]} align="middle">
      <Col span={24}>
          <Row className="text-gray breadcrumb">
            <span onClick={() => history.push("/decarbonization/facilities")} className="c-pointer">
              Facilities
            </span>
              <>
                <span
                  onClick={() => history.push(`/user/${facility_id}`)}
                  className="c-pointer"
                >
                  &nbsp;
                </span>
                <span className="text-primary fw-600">
                  &nbsp;&nbsp;{">"} {form.getFieldValue('facility_name')}
                </span>
              </>
          </Row>
        </Col>
      </Row>
      
      <Row>
        <Col span={24}>
      <Form 
        form={form} 
        layout="vertical" 
        name="add_facility_form"
        validateTrigger={['onSubmit', 'onBlur', 'onChange']}
        onFinish={(e) => onFinish(e)}
      >
        <Col className='formstyle1'>
        <Row gutter={16}>
          <Col span={18}>
            <Form.Item
              name="facility_name"
              label={t('general.facilityName')}
              rules={[{ required: true, message: `${t('general.pleaseInputTheFacilityName')}}!` }]}
            >
              <Input placeholder= {t('general.facilityName')} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={9}>
            <Form.Item  name="facility_address"
              label= {t('general.address')}>
              <GooglePlacesAutocomplete
                    form={form}
                    usage={"facilities"}
                  />
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item name="country" label= {t('general.country')} rules={[{ required: true, message: t('general.pleaseSelectACountry') }]}>            
              <Select placeholder={t('general.country')} onChange={handleChangeCountry} allowClear showSearch>
                {Countries.country().map((val:any, i:any) => (
                  <Option key={i} value={val}>
                    {val}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        </Col>
        <Divider />
      
        <Table
          className="custom-table" 
          columns={electricityColumns}
          dataSource={electricityUsageData}
          components={components}
          rowClassName={() => 'table-row'}
          tableLayout="fixed"
          footer={() => (
            <Row>
              <Button onClick={() => addYearData(getPreviousYear())} disabled={isPreviousYearDisabled()} icon={<PlusOutlined  className='addButton' />} type="link">
                Add {getPreviousYear()} data
              </Button>
            </Row>
          )}
          expandable={{
            expandedRowRender: (record) => (
              <Table
                columns={purchaseColumns}
                dataSource={record.purchases}
                pagination={false}
                bordered={false}
                tableLayout="fixed"
              />
            ),
          }}
          pagination={false}
        />
    
        <Row justify="end">
          <Space style={{ margin: '20px 0px 0px 0px' }} wrap={true}>
            <Form.Item>
              <Button type="primary" htmlType="submit" icon={<SaveOutlined />}>
                SAVE
              </Button>
            </Form.Item>
          </Space>
        </Row>
      </Form>
      </Col>
      </Row>
      <DynamicDialog
        visibility={isModalVisible}
        onSetVisibility={setIsModalVisible}
        onCancel={handleCancel}
        content={{
          component: 
          <AddExternalEacModal 
          handleSave={handleSave} 
          handleCancel={handleCancel} 
          facilityName={facilityName} 
          selectedYear={year}
          technologies={technologies}
          />,
          footer: null,
          width: 550
      }}
        closable={true}
        className="external-eac-modal"
      />
      <DynamicInfoModal visible={openInfo} setVisible={setOpenInfo} {...infoConfig} />

      </>
  );

What’s the best way to add borders to rows while keeping the table layout intact? Is there a way to customize Ant Design styles directly for this, or should I rely on CSS overrides?