I'm a front-end developer who just got off the job.
I'm portting Vue.js project to React. but I have a problem.
SCSS Code
px-contents {
margin:30px auto;
px-title{
font-size: 18px;
}
&.favGames {
position: relative;
margin: 40px auto 0;
.btn_more_text {
font-size: 13px;
position: absolute;
right: 0;
top: 0;
}
}
&.exchange__favOrder {
height: calc(100% - 10px);
}
}
Vue Code
<px-contents class="favGames">
...
</px-contents>
Our designer created a custom element with CSS like this.
Can I use this element in React?
If i use element in react.
react throws me an error like
Property 'px-title' does not exist on type 'JSX.IntrinsicElements'
Sorry for my poor English Skill.
Related
Hey there I've read many things about the style scopes for example https://angular.io/guide/component-styles. And somehow the point
Class names and selectors are local to the component and don't collide
with classes and selectors used elsewhere in the application.
does not work for me.
I have a header-component with the css class profileImage. Then there's also the class profileImage in my user-component. I'm not using any custom encapsulation for any component. But still it's buggy now because the class profileImage of the user-component also uses the one of the header-component and only overrides the elements defined in both. So for example position: absolute; gets inherited but it should not.
.profileImage[_ngcontent-bkm-c17] { //user-component
max-width: 34px;
max-height: 34px;
width: auto;
height: auto;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.profileImage { //header-component
border-radius: 50%;
position: absolute;
max-width: 54px;
max-height: 54px;
width: auto;
height: auto;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
This happend after using angular theming. To explain what exactly is forcing this problem:
I got a component-themes.scss:
#import "./app/header/header.component";
#mixin component-themes($theme) {
#include tile-theme($theme);
}
It's included in my material-themes.scss:
#include angular-material-theme($theme);
#include component-themes($theme);
.dark-theme {
color: $light-primary-text;
$dark-primary: mat-palette($mat-grey, 700, 300, 900);
$dark-accent: mat-palette($mat-blue-grey, 400);
$dark-warn: mat-palette($mat-red, 500);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
#include angular-material-theme($dark-theme);
#include component-themes($dark-theme);
}
And this is used in the basic styles.scss.
How can I prevent the described behavior while using component-themes?
The following code is for a mat-menu not a tile. I haven't renamed it yet because it's a copy of a tutorial.
header-component.scss (requested):
#import "~#angular/material/theming";
#mixin tile-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$background-color: mat-color($background, card);
.tile {
background-color: mat-color($primary);
}
}
.toolbar-spacer {
flex: 1 1 auto;
}
// verantwortlich für das Layout der Toolbar
.startpage:hover {
opacity: 0.6;
}
.mat-toolbar {
height: 7vh;
}
div {
overflow: inherit;
}
.language-buttons {
padding: 0 25px;
margin-right: 32px;
}
.language-buttons-login {
padding: 0 20px;
}
.navigate-buttons {
padding: 0 12px;
}
.mat-fab.mat-accent {
background: #3f51b5;
}
::ng-deep .mat-menu-panel {
position: relative;
top: 5px;
right: -16px;
}
.mat-button,
.mat-flat-button,
.mat-icon-button,
.mat-stroked-button {
min-width: 1px;
}
.imageContainer {
width: 54px;
height: 54px;
right: 20px;
position: absolute;
}
.profileImage {
border-radius: 50%;
position: absolute;
max-width: 54px;
max-height: 54px;
width: auto;
height: auto;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.font-awesome {
margin-right: 19px;
}
// ::ng-deep .accent-tooltip {
// background-color: mat-color($accentPalette);
// }
You are importing your "./app/header/header.component"; inside the component-theme.scss. This leads to the result that all styles from header.component will be global, because you are using the material-themes.scss in your global styles.scss.
So all styles you defined in header.component.scss will be loaded global, without that the angular compiler adds special attributes to ensure encapsulation. This leads to the result that other components, with the same classes will inherit all properties.
UPDATE:
Original answer proposed to simply remove the #import header.component statement, but after OP added the header.component implementation it was obvious that this would not be sufficient.
To solve this the best solution would be to replace the #import rule with the #use rule. But as this feature is currently only included in DartSass and only since version 1.23.0, another solution is to remove the mixin definition from the header.component.scss file and move it directly to the component-theme.scss, and remove the #import rule.
My electron-packager renders the css in a very strange way. In the package app there is a weird white margin around the actual app and the content window has only 50% of the space it should have:
In earlier version this used to work so I am not sure which change caused this. For comparison this is how the app looks like in dev mode:
How can I fix and debug this? I tried to integrate electron-debug from https://github.com/sindresorhus/electron-debug to have chrome dev tools within the packaged app but it seems like I did something wrong with the integration of it?
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 1080,
useContentSize: true,
width: 1920
})
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
})
}
require('electron-debug')({showDevTools: true})
app.on('ready', createWindow)
PS: My techstack is based on this boilerplate https://github.com/SimulatedGREG/electron-vue I added http://element.eleme.io/#/en-US for grid system and ui controls. As requested the css:
app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
/* CSS */
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica;
}
#app {
height: 100%;
margin: 0;
padding: 0;
}
</style>
And this is my MainPage.vue displayed inside the router view:
<template>
<el-container id="wrapper">
<el-header>Logo Bratum</el-header>
<el-main>
<router-view></router-view>
</el-main>
<el-footer>Program Status, Backend Status</el-footer>
</el-container>
</template>
<style>
.el-container {
height: 100%;
margin: 0;
padding: 0;
}
.el-header, .el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 60px;
z-index: 4;
padding: 0;
margin: 0;
}
.el-header {
top: 0px;
}
.el-footer {
bottom: 0px;
}
.el-main {
height: 100%;
background-color: #e9eef3;
padding-top: 0;
margin: 0;
}
.hline {
margin-top: 40px;
margin-bottom: 40px;
}
</style>
After many hours of puzzling I solved it. My #wrapper settings were written with the #wrapper css settings from the boiler plate's landing page.
For some reason these are applied during build but not during dev.
Adding "scoped" to the style tag solved it
<style scoped>
I can't find the utility class to hide content to user but show to screen reader in Semantic-UI.
What is the Semantic-ui equivalent of Bootstrap’s sr-only?
Not sure that exists in semantic-ui. A work around is to create a class like so (copied from bootstrap's scaffolding.less #129):
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
I am building a ReactJS app and using Zurb Foundation 6. I am also using React Modal: https://reactcommunity.org/react-modal/#documentation.
I want to style the Modal launched through React Modal to look like Zurb Foundation's Reveal. The Reveal SASS looks like this:
// 28. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
And my Modal CSS is like this:
.modal {
position: absolute;
width: 600px;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
background-color: $white;
}
.OverlayClass {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba($black, 0.45);
}
How can I achieve this? I have been experimenting with #include, but no success. At the moment, the Modal I have is not aesthetically pleasing. Help is greatly appreciated.
.your-modal {
#extend .reveal;
/* write your custom css here */
}
instead of using .reveal, now you just need to use the start .your-modal for a modal container.
The foundation section you have there is just the config variables for the reveal. The rest of the .scss for the reveal is here https://github.com/zurb/foundation-sites/blob/develop/scss/components/_reveal.scss
You should be able to structure the rendered HTML from your component to match the elements and classes from Foundation, just avoid the Foundation JS.
I created the carousel and I need to override styles Indicators buttons. I have style:
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 1;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
display: inline-block;
}
and the need to get:
.carousel-indicators {
z-index: 1;
padding-left: 0;
list-style: none;
display: inline-block;
}
How do I override styles or remove the default?
You mean styles to its default css?
.carousel-indicators {
z-index: 1;
padding-left: 0;
list-style: none;
display: inline-block;
/*lets override other properties*/
position: static;/*or relative*/
width: auto;
margin: 0;
text-align: left;
}
top, left aren't required to modify as it is using static position won't sense for those
You should also keep an eye in which order your scripts are loaded to get everything working correctly. If you overwrite CSS, the overrided code should be loaded at last. Also interesting is to make use of important:
.exampleClass {
margin: 0 !important;
}
.exampleClass {
margin: 5px;
}
The first one will overwrite the second one so that .exampleClass will have a margin of 0 because with !important you can tell the browsers that this directive has a higher weight than the others. But keep in mind that CSS will use the logical loading order of the code when you've multiplice important-statements because in this case the browser can't know which of them is more important than the other one.
Which Bootstrap version are you using?
If it's the CSS version, simply write your styles with a more specific selector. For example:
#your-carousel .carousel-indicators {
/* your styles*/
}
If you use the LESS version of Bootstrap (the option I always recommend), you can easily change it in the carousel.less file and compile to the CSS version.