I'm using styled-components for my app, and I imported a google font url in createGlobalStyle. :
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
* {
#import url(//fonts.googleapis.com/css2?family=Space+Mono:wght#400;700&display=swap);
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Space Mono', monospace;
font-weight: 400;
}
After deploying the app, the font is not applied. I tried replacing the #import url from https://fonts.. to http://fonts.. and then currently //fonts... These are some solutions I found that have worked for some, but not for me. What seems to be the problem here?
here is the link of the deployed app: http://patorikkun.github.io/tip-calculator-app
Try to move the #import to top level, outside * {}
From:
createGlobalStyle`
* {
#import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght#400;700&display=swap");
margin: 0;
...
}
...
}`;
To:
createGlobalStyle`
#import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght#400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Space Mono', monospace;
font-weight: 400;
}
...
}`;
From the MDN explanation:
Imported rules must precede all other types of rules, except #charset rules;
Related
I am trying to render a styled react calendar (see here https://blog.logrocket.com/react-calendar-tutorial-build-customize-calendar/#styling-your-calendar) in Symfony. I am following the tutorial found here: https://symfony.com/bundles/ux-react/current/index.html.
The calendar component itself appears to render fine. See below.
However, there is no css styling present.
Here is the code for the calendar:
// assets/react/controllers/MyComponent.jsx
import React, { useState } from 'react';
import Calendar from 'react-calendar';
import './calendar.css'
export default function () {
const [date, setDate] = useState(new Date());
return (
<div className='app'>
<div className='calendar-container'>
<Calendar
onChange={setDate}
value={date}
locale="en-EN"
/>
</div>
<p className='text-center'>
<span className='bold'>Selected Date:</span>{' '}
{date.toDateString()}
</p>
</div>
);
}
Here is the css code:
.react-calendar {
width: 400px;
max-width: 100%;
background-color: #fff;
color: #222;
border-radius: 8px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.125em;
}
.react-calendar__navigation button {
color: #6f48eb;
min-width: 44px;
background: none;
font-size: 16px;
margin-top: 8px;
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
background-color: #f8f8fa;
}
.react-calendar__navigation button[disabled] {
background-color: #f0f0f0;
}
abbr[title] {
text-decoration: none;
}
/* .react-calendar__month-view__days__day--weekend {
color: #d10000;
} */
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
background: #f8f8fa;
color: #6f48eb;
border-radius: 6px;
}
.react-calendar__tile--now {
background: #6f48eb33;
border-radius: 6px;
font-weight: bold;
color: #6f48eb;
}
.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
background: #6f48eb33;
border-radius: 6px;
font-weight: bold;
color: #6f48eb;
}
.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
background: #f8f8fa;
}
.react-calendar__tile--active {
background: #6f48eb;
border-radius: 6px;
font-weight: bold;
color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
background: #6f48eb;
color: white;
}
.react-calendar--selectRange .react-calendar__tile--hover {
background-color: #f8f8fa;
}
.react-calendar__tile--range {
background: #f8f8fa;
color: #6f48eb;
border-radius: 0;
}
.react-calendar__tile--rangeStart {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
background: #6f48eb;
color: white;
}
.react-calendar__tile--rangeEnd {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
background: #6f48eb;
color: white;
}
Here is a screenshot of the folder/file structure:
Here is my webpack.config.js
const Encore = require('#symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or subdirectory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/app.js')
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
// .enableVersioning(Encore.isProduction())
.enableVersioning()
// configure Babel
// .configureBabel((config) => {
// config.presets.push('#babel/preset-react');
// })
// enables and configure #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = '3.23';
})
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use React
.enableReactPreset()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
And here is my app.js:
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
////////////////////////////////////////
//
// FOR REACT
//
// https://symfony.com/bundles/ux-react/current/index.html
import { registerReactControllerComponents } from '#symfony/ux-react';
// Registers React controller components to allow loading them from Twig
//
// React controller components are components that are meant to be rendered
// from Twig. These component then rely on other components that won't be called
// directly from Twig.
//
// By putting only controller components in `react/controllers`, you ensure that
// internal components won't be automatically included in your JS built file if
// they are not necessary.
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
//
////////////////////////////////////////
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';
// compile new js file
// import './javascript/method1.js';
// start the Stimulus application
import './bootstrap';
Please let me know if there is anything else I can do to help. When running npm run dev, it does seem to recognize the import './calendar.css' as valid. I am not sure what to do here and haven't found anything similar online yet. Thank you.
enter image description here
Image
encountering white space at top of the react-app
Check the image
There's weird whitespace occurring at the top of the react-app. My developed app not even a big react-app but there something occupying the space there and creating a white space there. I have deleted the old project and did this new one thinking it'll remove my error but the same result. I'm using a routing package to route through my app react-route-dom. I tried all the possible ways but couldn't find out the error or the line of code that is triggering the white-space at the top of the react-app. Please anyone help I have to submit my project!.
App.js
import React from 'react'
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello</h1>
</div>
);
}export default App
App.css
.App {
text-align: center;
background: red;
height: 30%;
}
Index.js
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'
const app = <BrowserRouter><App/></BrowserRouter>
ReactDOM.render(
<React.StrictMode>
{app}
</React.StrictMode>,
document.getElementById('root') );
reportWebVitals()
**index.css**
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #333;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
Add this to your index.css :
*{
margin: 0;
padding: 0;
box-sizing: border-box; // not neccesary
}
This happens because chrome by default adds some padding to your page
user agent stylesheet is doing that. For instance Chrome styles h1 by default like so:
h1 {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
This will create those margins you're complaining about. All you need to do is explicitly style your h1 in your CSS file. Something like this: h1{margin: 0px}. Do the same for the body.
Also note that If <!DOCTYPE> is missing in your HTML content oftentimes the browser gives preference to the "user agent stylesheet" over your custom stylesheet.
In my case, the space provoked the css property place-items: center from the index.css file.
I used IconMoon to create custom icon fonts.
In the .html that is generated by it, it works perfectly. But when I try to use it in my project with React and Styled-Components, instead of being displayed the icon displays its content in HTML.
My fonts are in the path: src/assets/fonts/icons
Fonts are being downloaded by the browser and no errors are displayed:
Soon I am trying to create a component for my fonts, similar to FontAwesome and this happens:
MY COMPONENT:
import React from "react";
import styled from "styled-components";
const Tst = styled.i`
font-family: "spotify" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
::before {
content: "\e900";
color: red;
}
`;
const SaveFavorite = () => {
return <Tst />;
};
export default SaveFavorite;
MY GLOBAL STYLES:
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
#font-face {
font-family: "spotify";
font-weight: normal;
font-style: normal;
src: url("../assets/fonts/spotify.eot?") format("embedded-opentype"),
url("../assets/fonts/spotify.ttf?") format("truetype"),
url("../assets/fonts/spotify.woff?") format("woff"),
url("../assets/fonts/spotify.svg?") format("svg");
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: 0;
}
body {
font-family: 'CircularSpUIv3T', sans-serif;
color: white;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
user-select: none;
}
img {
width: 100%;
max-width: 100%;
height: auto;
}
`;
export default GlobalStyle;
If you look at the css generated by Styled Components, you'll find that the font paths aren't resolved at all, they are exactly the way you typed them. The browser won't be able to find relative paths in the src directory without some help from Babel, and the way you have it now these paths would just be passed as-is.
You have two options, although I'm not sure if both will work.
Option 1: move your fonts to the public directory
Files in the public directory can be found by the browser just like any old HTML page. In your global style, you would then have to use a path that is relative to public/index.html.
Your file structure would be something like:
project
|-- public
|-- index.html
|-- fonts
|-- spotify.eot
|-- spotify.ttf
|-- spotify.woff
|-- spotify.svg
|-- src
|-- global.style.js
|-- (...)
And your global.style.js:
const GlobalStyle = createGlobalStyle`
#font-face {
font-family: "spotify";
src: url("fonts/spotify.eot?") format("embedded-opentype"),
url("fonts/spotify.ttf?") format("truetype"),
url("fonts/spotify.woff?") format("woff"),
url("fonts/spotify.svg?") format("svg");
}
Option 2: keep your fonts in src, but make Babel resolve the paths for you
To make Babel resolve the paths, we need to import the files in our global.style.js, and then use the resolved path instead of the static one:
import SpotifyEOT from '../assets/fonts/spotify.eot';
// etc
const GlobalStyle = createGlobalStyle`
#font-face {
font-family: "spotify";
src: url(${SpotifyEOT}?) format("embedded-opentype"),
// [etc]
}
I don't know what the question mark is actually for but I assume you can just place it after the resolved path like I did.
So let's say I have some base styling for the app like:
:root {
--color-primary: #eb2f64;
--color-primary-light: #FF3366;
--color-primary-dark: #BA265D;
}
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 16px;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 1.6;
background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark));
background-size: cover;
}
I want to use "Styled-components" library but wondering how do I add these base styles to my app without touching any external .scss file? Or should I create base.scss file and do import './base.scss'; to index.js?
It doesn't allow me to do smth like this:
const Wrapper = styled.html`
box-sizing: border-box;
font-size: 16px;
`;
I get an error because of that html element
Aha. Found it: import { injectGlobal } from 'styled-components';
I'm new to React and React Native, I want to build a cross platform app which would use native components on mobile platforms.
I installed and initialized a react-native-app and install react-native-web and I wonder how to start my boilerplate code on android emulator, the documentation doesn't tell how.
Use these commands to get Demo Code
npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start or react-native start
Once you Get familiar to basics. I recommend you boilerplate code you must check out .
1. https://github.com/cubixlabs/ReactCube
2. https://github.com/GeekyAnts/NativeBase
3. https://github.com/shoutem/ui
Web View Component index.js
// #flow
import React from "react";
import PropTypes from "prop-types";
import {
WebView as WebViewRn
} from "react-native";
export default class WebView extends React.PureComponent {
static propTypes = {
source: PropTypes.object
};
static defaultProps = {
source: {
html: `
<html>
<header>
<style>
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</header>
<body>
<p>No valid HTML provided</p>
<p>source props is missing</p>
</body>
</html>
`
}
};
render() {
const {
source,
...rest
} = this.props;
return <WebViewRn source = {
source
} { ...rest
}
/>;
}
}
Component : Styles.js
// #flow
import {
StyleSheet
} from 'react-native';
import {
Colors
} from '../../theme';
export default StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.primary.backgroundColor
}
});
Container Class index.js
// #flow
/*
Disable selection style
style="-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;"
Word wrap and break word style
style="word-wrap: break-word;"
*/
import {
connect
} from "react-redux";
import React, {
Component
} from "react";
import {
WebView
} from "../../components";
class Terms extends Component {
render() {
return <WebView source = {
{
html
}
}
/>;
}
}
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin: 0 auto;
}
h2 {
color: #000;
margin-bottom: 15px;
font-size: 30px;
font-weight: 700;
font-family: 'Roboto', sans-serif;
line-height: 1.2;
margin-top: 25px;
}
p {
font-family: 'Roboto', sans-serif;
text-align: left;
line-height: 26px;
font-weight: 300;
font-style: normal;
color: #000;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container" style="-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;">
<h2>Disclaimer</h2>
<p>Always make sure to double check recipe and component ingredients (and where they are produced) if you have any health
related issues to avoid particular foods. Please make sure to consult a doctor and always double check labels. Please
notify us of any errors on the recipes itself. We strive to make information as acurate as possible for convenience, however
we disclaim any warranty on it.</p>
<p>Always consult a licensed physician or licesned nutritionalist for all medical, dietary and allergen issues. All information
on our site “as is” has no warranty on it of any kind. Either expressed or implied. </p>
<p>Rich thomas LLC and its partners disclaim all warranties expressed or implied including without limitation those of merchanitbility
or fitness for a particular purpose and non fringement or arsiing from a course of dealing, usage, or trade practice.
Rich Thomas LLC shall not be liable for any indirect, special, consequential, or incidental damages arising from any information
present.</p>
</div>
</body>
</html>`;
const mapStateToProps = () => ({});
const actions = {};
export default connect(mapStateToProps, actions)(Terms);