1

I used this configuration to apply global css configuration into React project based on JavaScript:

css file:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
}

App.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

But font style for example is not applied. Do you know what is the appropriate configuration for React project based on TypeScript?

Peter Penzov
  • 1,126
  • 134
  • 430
  • 808

3 Answers3

1

Most react projects have index.scss or index.css file. You can find it in the root or src directory.

I think you can use this file.

Chuck
  • 776
  • 5
  • 18
  • I deleted is because it was not used. – Peter Penzov Aug 25 '21 at 21:56
  • No wonder I could not find it in `App.tsx` file. First of all, don't delete that file. I don't remember clearly, but it is must be imported from `index.html`,` indext.tsx` , `App.tsx` or things like that. Second, you can add a new css file in the directory where index.html is located. Define css style there and include it in the index.html file. – Chuck Aug 25 '21 at 21:59
1

What you might be missing here is an import statement to import the file where your css is defined into App.tsx.

Try adding the following import statement to the top of App.tsx to apply the styles to the entire application:

// App.tsx
import './yourStyle.css'

NB: your import should target the path to the style sheet relative to App.tsx.

See an example here

Update

In addition, you should ensure that the font you want to use 'PT Sans' is available inside of your project since it may not be supported by default.

To do so, follow the steps here.

rexess
  • 729
  • 4
  • 7
  • For some reason it's not working. Not sure why. – Peter Penzov Aug 25 '21 at 22:11
  • You are right that it should not work. Another piece of the problem is referenced in [Ernesto's answer](https://stackoverflow.com/a/68931188/13944042)! I will update mine. – rexess Aug 26 '21 at 00:53
1

The reason is bcuz specificity

inline id class tag *
    0    0     0     0   1

Your styles have an specificity of 1, if body or any other tag specifies the font-family it will override yours

inline id class tag *
    0    0     0     1   0

Them font-family styles is one of them inherited styles there for if you want yow document to have an specific font family you need to add them at the body or html tags

body {
font-family: yow-font;
}

If pt sans is not one of them safe fonts you need to add its url at the html page