https://github.com/sohanemon/env-mui-emotinon-styled-component
https://github.com/sohanemon/env-mui-emotinon-styled-component
codemon emotion env environment-variables firebase material-ui mui react-router styled styled-components
Last synced: 27 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/sohanemon/env-mui-emotinon-styled-component
- Owner: sohanemon
- Created: 2022-10-16T18:03:30.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-10-18T05:06:47.000Z (over 3 years ago)
- Last Synced: 2025-06-23T19:48:54.060Z (11 months ago)
- Topics: codemon, emotion, env, environment-variables, firebase, material-ui, mui, react-router, styled, styled-components
- Language: JavaScript
- Homepage: https://firebase-kickstart.netlify.app/
- Size: 330 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Store sensitive data in env
- create .env in the root folder
- start variable name with REACT*APP*
- to assign with variable use `=`
```js
REACT_APP_API_KEY = RzsfaSyCcersTVXesA_HMprI6fyweQewrlvhqQjT44;
```
- no `" ' ` should be used
- variables are stored in `process.env` object
- access them as follow
```js
console.log(process.env.REACT_APP_API_KEY);
```
> must restart the app to see the changes.
# Emotion & Styled-Component
- create a component
```js
const MyButton = styled.button`
background-color: red;
}
`;
```
- set hover effect in the component
```js
const MyButton = styled.button`
&:hover {
background-color: #e34133;
}
`;
```
> `&:hover` should be trimmed i.e no space between
- use of props
```js
const MyButton = styled.button`
background-color: ${(args) => args.bg};
padding: ${({ p }) => p};
`;
return (
<>
Continue With Google
>
);
```
> the passing args names should be same to the props
- modify existing components like `mui`
```js
const MyButton = styled(Button)`
background-color: ${({ bg }) => bg};
&:focus {
background-color: #e34133;
}
`;
```
> styling Mui Button