Styled Components
Explore how to build reusable styled components in React with Transcrypt. Learn to handle and merge props and styles correctly to create consistent buttons and simplify your front-end code.
We'll cover the following...
Consistent CSS
If we want the style for a particular element to be consistent everywhere we use it, another option is to create a styled component. This is where we create a new reusable React component for the sole purpose of giving it a fixed style. We would use our custom-styled element that has the style we want already applied to it. In lines 34-40, we do that for our Edit and Delete buttons by creating a styled component called Button (with a capital “B”).
# Load React and ReactDOM JavaScript libraries into local namespace
React = require('react')
ReactDOM = require('react-dom')
# Map React javaScript objects to Python identifiers
createElement = React.createElement
useState = React.useState
useEffect = React.useEffect
def render(root_component, props, container):
def main():
ReactDOM.render(
React.createElement(root_component, props),
document.getElementById(container)
)
document.addEventListener('DOMContentLoaded', main)
# JavaScript function mappings
alert = window.alert
def setTitle(title):
document.title = title
Explanation
Here, we created a new React functional component called Button that takes props as a parameter and is based on the ...