EN
React - how to remove npx create-react-app default padding/margin?
1
answers
0
points
Can you help me with the following problem?
I've just created a new react app using:
npx create-react-app app_name
And when I assigned a simple red background style to it, I have unwanted white space on both sides and at the top, above the red component. How can I get rid of this?
My component:
const App = () => {
return <div style={{ background: 'red', height: '50px' }}></div>;
};
Result:
1 answer
0
points
1. Go to the public/ folder of your application,
2. create a <style> tag inside theindex.html file,
3. inside the <style> tag reset margin and padding properties for all components.
Practical example
Add the following line to the public/index.html:
<style>
* {
margin: 0;
padding: 0;
}
</style>
Your index.html file should now look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!--
some meta data and link components here
-->
<title>React App</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
0 comments
Add comment