Inline Styles
Explore how to apply inline CSS styles directly to React elements in Python using Transcrypt. Understand how to replace external stylesheets with style props, convert CSS attributes to camelCase, and use variables to keep style code clean and maintainable.
We'll cover the following...
We'll cover the following...
Introduction
We can use inline CSS to apply style attributes to our React elements. Let’s remove the stylesheet reference in the HTML file, then move the CSS styles into our application and add them directly to the elements as a style prop.
{
"name": "ch18",
"version": "1.0.0",
"description": "React to Python",
"main": "index.js",
"scripts": {
"start": "NODE_ENV=development parcel --log-level 4 index.html --out-dir dist/dev --host 0.0.0.0 --port 8000",
"build": "NODE_ENV=production parcel --log-level 4 build index.html --no-source-maps --out-dir dist/prod --host 0.0.0.0 --port 8000",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.14.0",
"react-dom": "^16.14.0"
},
"devDependencies": {
"parcel-bundler": "^1.12.4",
"parcel-plugin-transcrypt": "^1.0.20"
}
}
Adding inline CSS-styling in our application
Changes made
The ...