Override RSS feed styling in React

Question

I'm trying to apply my own style to blog posts I'm obtaining through a rss feed in React. Currently I'm using rss-parser to obtain the content, and I'm using the dangerouslySetInnerHTML prop to display it.

Getting content:

function Blog(props) {
const [feed, setFeed] = useState(null)
let blogID = 0;
let feedName = 'https://roco.org/feed/'

useEffect(() => {
    const fetchData = async () => { 
        let test = await parser.parseURL(CORS_PROXY + feedName);
        setFeed(test)
        console.log("test", test)

      };
    fetchData()
}, []);

let title   = ""
let content = ""
let date    = ""
let finalContent = []
let parsedContent = []
if(feed) {

    title    = feed.items[blogID].title
    content  = feed.items[blogID]["content:encoded"]
    let isoDate     = feed.items[blogID].pubDate
    let convDate = new Date(isoDate)
    date = convDate.getFullYear()+'-' + (convDate.getMonth()+1) + '-'+convDate.getDate()

}

Displaying content:

<div className= "Blog-content" dangerouslySetInnerHTML={{__html: content}}>
</div>

However, the styling of the components of the blog post often override my own. For example, images included in the blog like this one don't resize properly:

<div style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https://www.houstonpress.com/arts/roco-gets-well-deserved-grammy-nod-for-first-album-visions-take-flight-11391485\"><img src=\"https://roco.org/wp-content/uploads/2019/12/roco_river_oaks_chamber_orchestra_concert_photo_02_credit_joel_luks.jpg\" alt=\"ROCO in concert at The Church of St. John the Divine. \" width=\"1024\" height=\"683\" /></a>

Is there a way I can override the styling without writing my own html parser?

Answer 1

I'm assuming that there is no way to modify the HTML that you're receiving from the feed, and that the HTML contains the inline styles as well as height/width attributes.

There are a couple of ways to handle this-

1. You could simply ensure your CSS definitions for the applicable classes have an !important directive. For example-

    .wp-caption {
      width: 500px !important;
    }

2. You can replace specific nodes using the ReactHtmlParser API.

    const replace = domNode => {
      if (domNode.attribs) {
        let attrs = domNode.attribs;
        if(attrs.style) {
          attrs.style = null;
        }
        if(attrs.width) {
          attrs.width = null;
        }
        if(attrs.height) {
          attrs.height = null;
        }
        return (domNode);
      }
    };
    HTMLReactParser(html, { replace });

Note, that this is a bit heavy in the case of dealing with the "style" attribute. Since the domNode.attribs.style property is a string, you'd be removing all inline style definitions if you used the above code. To more intelligently remove only dimension properties, you'd have to use string manipulation (regex, etc) to deal with it - not ideal. That being said, should inline styles coming from an RSS feed really supercede what you're trying to render? I would argue 'no' in most cases.

Also, according to the ReactHtmlParser documentation, you shouldn't have to use the "dangerouslySetInnerHTML" function at all.