LMQNAFeedPostBody

LMQNAFeedPostBody renders the content section of Q&A posts, handling the display of questions, answers, and associated media. It supports rich text formatting and various content types specific to Q&A format.

CSS Classnames

Classname	Description
lm-feed-wrapper__card__body__heading	Styles the main heading/title section of the post body
lm-feed-wrapper__card__body__content__read-more-tap-icon	Controls the appearance of the read more button and its icon
lm-feed-wrapper__card__body__attachment	Manages the layout and styling of post attachments section
lm-feed-wrapper__card__body__content	Styles the main content area of the post body
lm-feed-wrapper__card__body overflow-word-break	Handles text overflow and word breaking behavior in post content
attachments	Defines the styling for attachment containers and their layout

Example

To customize the component with its classnames, open your base CSS file and override the styles using the classname:

.lm-feed-wrapper__card__body__heading {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

Customising LMFeedAttachmentsView

You can also pass your custom component to replace the default view for LMFeedAttachments. You can use the below contexts to customise the component.

Contexts Used

• LMFeedPostContext

Below is an example for customising the view for LMFeedAttachments and rendering your own view. It is fairly a 2 simple step process

• Step 1: Create your own custom view.

import {
  LMQNAFeed,
  LMFeedNotificationHeader,
  LMFeedCustomEvents,
  initiateFeedClient,
  LMQNAFeedUniversalFeed,
} from "@likeminds.community/likeminds-feed-reactjs";

// Custom Component for LMFeedAttachmentsView
const CustomLMFeedAttachmentsView = () => {
  return (
    // Your Custom Code
  );
};

• Step 2: Pass your Custom View to LMQNAFeed

import {
  LMQNAFeed,
  LMFeedNotificationHeader,
  LMFeedCustomEvents,
  initiateFeedClient,
  LMQNAFeedUniversalFeed,
} from "@likeminds.community/likeminds-feed-reactjs"

const App = () => {
  const lmFeedClient = initiateFeedClient()

  return (
    <div className="lm-wrapper">
      <LMFeedNotificationHeader customEventClient={customEventClient} />
      <LMQNAFeed
        client={lmFeedClient}
        customEventClient={customEventClient}
        userDetails={userDetails}
        CustomComponents={{
          CustomPostViewAttachment: <CustomLMFeedAttachmentsView />,
        }}
      >
        <LMQNAFeedUniversalFeed />
      </LMQNAFeed>
    </div>
  )
}
export default App

Reference

For reference, check out this file