Alyle-UI
Alyle-UI copied to clipboard
A-l-y-l-e
classes applyed to components changes with production build
Bug, feature request, or proposal:
I am not sure if this is a bug or a mistake on my side!
What is the expected behavior?
components have the same classes in --prod build that they have in development enviroment
What is the current behavior?
classes on components are changed in production
Which versions of Angular, AlyleUI, OS, TypeScript, browsers are affected?
Version of @alyle/ui@: ^10.3.0
$ node_modules/.bin/ng --version
Angular CLI: 10.1.6
Node: 12.18.3
OS: win32 x64
Angular: 10.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1001.6
@angular-devkit/build-angular 0.1001.6
@angular-devkit/core 10.1.6
@angular-devkit/schematics 10.1.6
@angular/cdk 10.2.4
@angular/cli 10.1.6
@angular/material 10.2.4
@schematics/angular 10.1.6
@schematics/update 0.1001.6
rxjs 6.6.3
typescript 3.9.7
Example
I had this styles for my image cropper
const STYLES = (_theme: ThemeVariables, ref: ThemeRef) => {
ref.renderStyleSheet(SLIDER_STYLES);
const slider = ref.selectorsOf(SLIDER_STYLES);
return {
cropper : lyl`{
max-width: 238px
height: 238px
}`,
sliderContainer: lyl`{
position: relative
${slider.root} {
margin: auto
display : block
}
}`,
slider : lyl`{
padding: 1em
}`,
cropResult : lyl`{
border-radius: 50%
}`
};
};
With this html
<div ly-dialog-content [lyPx]="0" class="custom-cropper">
<div class="title-cropper">
Crop Image and Upload
<!-- <button *ngIf="ready" ly-button color="primary" (click)="dialogRef.close()">X</button> -->
<button mat-raised-button *ngIf="ready" color="primary" class="container__close-icon close-icon" (click)="dialogRef.close()">
</button>
</div>
<ly-img-cropper [withClass]="classes.cropper"
[config]="myConfig"
[(scale)]="scale"
(ready)="ready = true"
(cleaned)="ready = false"
(minScale)="minScale = $event"
(cropped)="onCropped($event)"
(loaded)="onLoaded($event)"
(error)="onError($event)"
>
<span>Drag and drop image</span>
</ly-img-cropper>
<div *ngIf="ready" [className]="classes.sliderContainer">
<div [class]="classes.slider">
<ly-slider
[thumbVisible]="false"
[min]="minScale"
[max]="1"
[(ngModel)]="scale"
(input)="scale = $event.value"
step="0.000001"></ly-slider>
</div>
</div>
</div>
I added the custom-cropper class so that my coworker can style the component as needed, this worked just fine in development environment, but after we deployed the code to production --prod this custom styles stopped working
my local dev run has these classes : LyImageCropper-root-af cropper-ab but the prod run has these : af ab ?? what am I missing here?
https://stackoverflow.com/questions/64569216/customizing-alyle-ui-component-styles
Class names are prefixed as a unique identifier and can change in both development and production mode. That means you can't use css files (be it css, scss, ...) to customize Alyle UI components.
There are other ways to customize Alyle UI components. You can add styles to themes or add styles to the component.
Styles must be added directly to a ts file:
import { STYLES as SLIDER_STYLES } from '@alyle/ui/slider';
import {
STYLES as CROPPER_STYLES,
LyImageCropper,
ImgCropperConfig,
ImgCropperEvent,
ImgCropperErrorEvent
} from '@alyle/ui/image-cropper';
const STYLES = (_theme: ThemeVariables, ref: ThemeRef) => {
ref.renderStyleSheet(SLIDER_STYLES);
ref.renderStyleSheet(CROPPER_STYLES);
const slider = ref.selectorsOf(SLIDER_STYLES);
const cropper = ref.selectorsOf(CROPPER_STYLES);
return {
root: lyl `{
${cropper.root} {
max-width: 320px
height: 320px
}
${cropper.area} {
// styles for cropper area
}
}`,
sliderContainer: lyl `{
position: relative
${slider.root} {
position: absolute
left: 0
right: 0
margin: auto
top: -32px
}
}`,
slider: lyl `{
padding: 1em
}`
};
};
@Component({
...
providers: [
StyleRenderer
]
})
export class CropperDialog implements WithStyles, AfterViewInit {
readonly classes = this.sRenderer.renderSheet(STYLES, 'root');
The second parameter of
renderSheetis the class name that will be added to this component.
About Customization:
- https://alyle.io/customization/dynamic-styles
- https://alyle.io/customization/theming
- https://alyle.io/customization/theming-components
Tnx for the explanation , one more question
return {
root: lyl `{
${cropper.root} {
max-width: 320px
height: 320px
}
${cropper.area} {
// styles for cropper area
}
}`,
sliderContainer: lyl `{
position: relative
${slider.root} {
position: absolute
left: 0
right: 0
margin: auto
top: -32px
}
}`,
slider: lyl `{
padding: 1em
}`
};
where the keys in this object are coming from? sliderContainer, slider ? are they classnames?
Yes, they are keys that can be created with any name to use in components, for example:
<div [className]="classes.sliderContainer">
<div [className]="classes.slider">
classes.sliderContainer returns a classname, you can also use it with [class]. [className] & [ngClass].
How can you do the same for a hover effect?
I think it would be something like this but I am not sure and have not tested it.
return {
slider: lyl `{
&:hover {
}
}`
};