Create-React- App CSS issue

Hi All,

I’m trying to deploy a markdown previewer on GitHub using create-react-app. The issue I am facing is that the CSS doesn’t seem to be working fully.

The file structure I have is as follow:

I’ve imported App.css into App.js

import React from 'react';
import marked from 'marked';
import Prism from "prismjs";
import './App.css';

My App.css is as follow:

.title {
  text-align: center;
}

.subHeader {
  text-align: center;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
}

img[alt=freeCodeCamp] {
  width: 200px;
}

// MARKDOWN STYLES
#preview {
  padding: 0 1rem;

  blockquote {
    border-left: 3px solid #224b4b;
    color: #224b4b;
    padding-left: 5px;
    margin-left: 25px;
  }

  > p > code {
    padding: 3px;
  }

  code {
    background: white;
    font-size: 0.875rem;
    font-weight: bold;
  }

  pre {
    display: block;
    overflow: auto;
    background: white;
    padding: 5px;
    line-height: 1.2;
  }

  table {
    border-collapse: collapse;
  }

  td,
  th {
    border-style: solid;
    border-width: 2px;
    border-color: black;
    padding-left: 5px;
    padding-right: 5px;
  }

  img {
    display: block;
    max-width: 90%;
    margin: 2rem auto;
  }
}

My code in index.js is as follow mostly generic template except for the imports:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

The code I’m having issue with in App.js is as follow:

<div id="preview" style={outputStyle} dangerouslySetInnerHTML={{ __html: marked(this.state.markdown)}}>
</div>

The #preview in my CSS does not seem to be applied. The inline style is applied correctly and I’m aware that the specificity is higher than the id. There should be no issues as my code is exactly the same on codepen (https://codepen.io/ye-song/pen/OJpEVaG) and it works. So I’m stumped when it didn’t work while porting over to GitHub.

Appreciate if anyone could point out where I could have gone wrong.

Thanks in advance for your help

That’s not CSS. CSS doesn’t allow nesting.

Hi Jenovs,

Thanks so much for pointing that out. I added node-sass and imported it as scss and it works now.

Appreciate it!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.