I want to use draft.js in my project. It has its own css which I also need to import. In the documentation it is said:
This CSS should be included when rendering the editor, as these styles
set defaults for text alignment, spacing, and other important
features.
How do I include the Draft.css while rendering the component? Do I include it in my main index.html?
Also how to give an id to the editor so that I can style it (eg. border, padding, min-height, etc)
Depending on your setup, you should be able to include or import the Draft.css in the index.js file.
...
import 'draft-js/dist/Draft.css';
...
draftjs produces Draft.css in the build and is available within the node_modules. Use the css for default styling.
For background color of the editor, the following CSS class should be modified:
.DraftEditor-editorContainer {
background-color:#fff;
border-left:.1px solid transparent;
position:relative;
z-index:1
}
Related
Vaadin flow theming and styles confuse me. Is there a way to disable it and apply natural css. I know how to reference a css file inside vaadin, and use setClassName but I would prefer to use ordinary css style for components.
Thank you
You can override the default lumo styling by providing yours. For instance, to remove the background color from a ComboBox, I can target the input as follows in a CSS file named vaadin-combo-box.css:
[part="input-field"] {
background-color: var(--lumo-base-color);
max-width: fit-content;
}
To set the colors for a disabled button, you can target it as follows:
filename: vaadin-button.css
code:
:host([theme~='primary'][disabled]) {
background-color: red;
}
And you get the following:
To change the primary color or any other global styling, explore your styles.css file.
For a better understanding, take a look at this video https://vaadin.com/learn/training/v14-theming
Like with all other styling you need to check the states / attributes of the component while the specific state is active and check the DOM - only caveat would be that you need to add those style in the specific files like vaadin-button.css to be applied inside the shadow DOM.
I am using an external panel component which would open on a button click.It has default width and other style properties.Is there any way I can override the width of the panel and used as responsive one .what i want to achieve is programmatically change the width of the panel in my components .
For example,
In my app.component.html iam using the panel container inside app.component.html
panel-container
How can i attach a custom class
panel-container class
="panel-width"
In.css
.panel-width{
Width:500 px
}
Without changing angular default view encapsultion
You can use :host::ng-deep to style the external component.
:host::ng-deep .panel-container {
width: 500px;
}
It is deprecated since 2017, but there is no new way to do this if you do not want to change ViewEncapsulation. Source: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Got the solution.
We can override the same in our parent CSS file itself.
Dont use ng deep as that s deprecated
Overwriting library styles in separate global styles — not scoped!
let's override the Angular Material tab style.
create angular material tab scss file in app > assets > scss > override > am_tab.scss
and import the am_tab.scss file in the styles.scss #import 'assets/scss/override/am_tab.scss'
// am_tab.scss
mat-tab-group {
&.mat-tab-group.mat- primary .mat-ink-bar {
background-color: red;
}
}
More read in this article
I know I can use predefined material design (or font awesome etc...) icons in Vuetify like this:
<v-icon>mdi-clock</v-icon>
But is there a way to use v-icon component to display my custom icon defined as svg in my-icon.svg file? This .svg file is located located in my project public/img directory but how can I reference it inside v-icon component?
AFAIK If you want to use as external svg, the answer is unfortunately no.
Anyway, you can import the svg file as a component with vue-svg-loader then use inside v-icon.
import Stack from "#/icons/stack.svg"; // import /src/icons/stack.svg
export default {
components: {
Stack
}
};
Then use it
<v-icon>
<Stack/>
</v-icon>
Another solution How To Add Custom SVG Icon in Vuetify - Vue.
You can achieve the same using CSS.
.v-icon
height 20px
width 20px
&.engine
background-image url(https://www.svgrepo.com/show/9344/train.svg)
background-size contain
background-repeat no-repeat
&::before
visibility hidden
content ""
check out this codepen.
I have a react numpad component in my code and I need to change its size, but I cannot modify its CSS, theme or something like that properly.
I've already realized that some style like colors or fonts may be changed in node_modules\react-numpad\build, but omething like size or align I cannot change. Somebody help me, please , after looking to the following template code.
import NumPad from 'react-numpad';
<NumPad.Number
onChange={(value) => { console.log('value', value)}}
label={'Total'}
placeholder={'my placeholder'}
value={100}
decimal={2}
/>
When we click on the component, we get the numpad open. I need this numpad to be something much bigger than the standard one.
Your Numpad is dynamically added to the document.
You can change it's CSS. If you inspect it, you will get a element with MuiPaper-root class, using this class name you can change it's CSS.
.MuiPaper-root{
width: 500px;
height: 500px;
font-size: 25px;
}
If you want to change color of number being displayed you can do this,
.MuiPaper-root .MuiButtonBase-root{
color:blue;
}
Like this you can change CSS for whatever you want.
Note: Don't change any CSS directly in node_modules folder, instead you can override the CSS in your custom CSS file.
I have two components with tab groups in them. One is a main page and I have overwritten the css to make the labels larger, done using ViewEncapsulation.None. The other is a dialog, and I want to keep it small but still apply some other custom styles to it.
When I open the dialog after visiting the other tabs page, it copies all the styles, which I have figured is because ViewEncapsulation.None bleeds CSS but not exactly as expected.
Is there anyway to override Angular Material styles without changing ViewEncapsulation so that I can keep the two components separate?
Solution 1: you can put all elements of your component into a parent element with a css class and override the material style into it.(it's custom capsulation)
Note: ViewEncapsulation is none here.
component.html
<div class="my-component__container">
<!-- other elements(material) are here -->
</div>
component.scss
.my-component__container{
// override material styles here
.mat-form-field{...}
}
Solution 2: use /deep/(deprecated).(use ::ng-depp insteaded)
:host /deep/ .mat-form-field {
text-align: left !important;
}
Solution 3: don't change ViewEncapsulation , then:
:host {
.my-component__container{}
}
if you would like to customise your Angular material components and provide your own stylings, I have the following suggestions. You may use one of them.
1) Overwrite the classes on your main style.css (or style.scss, whichever you are using). If you are wondering, it is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration.
For instance,
.mat-form-field-label {
color:blue!important;
}
2) Customising the various Angular Material directive (such as MatPlaceholder) by providing a custom class.
For instance, when we use the MatPlaceHolder, and on the component.html template,
<mat-placeholder class="placeholder">Search</mat-placeholder>
On your component.css, we can then supply the css properties to the placehodler class
.placeholder {
color: green
}
Note:
Alternatively you may use ::ng-deep, but I would strongly suggest using ::ng-deep as it will soon be deprecated.
::ng-deep .mat-dialog {
/* styles here */
/* try not to use ::ng-deep */
}
You can use ::ng-deep. Refer NgDeep