How to Reuse Styles

How to reuse styles?

You could, and probably should, apply both classes to the element like so:

<a class="tab active"></a>

If you want a css rule for the specific combination of these two classes, you'd do it like so:

.tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active 
{
    cursor: default;
    background-color: #FFCF75;
}

.tab.active /* no space */
{
    /* styles for elements that are both .tab and .active */
    /* leaving .active reusable for things other than tabs */
    /* and allowing override of both .tab and .active */
}

This allows you to avoid making unnecessary copies of your style declarations... and gives you the specificity to override either of the individual classes when an element has both.

Reusing styles in SASS/SCSS without merging selectors

Could you use a @mixin?

// Define here
@mixin generic-error {
  // Error styling
}

// Replace original
.notification {
  &.error {
    @include generic-error;
  }
}

How to reuse react-native StyleSheet (styles) in react?

What you could do is store all your styles in an object in some file e.g. const containerStyles = { borderRadius: 2 }, export it, then for React Native use the StyleSheets javascript class to create the styles for your div container

import {containerStyles} from '../someFile.js'
const styles = StyleSheets.create({  container: containerStyles})

how can i edit the contents or the styles of a reused (reusable) component without changing the other in angular

You can e.g. use Input to control this like

<app-search-footer version='search'></app-search-footer>

In the component:

@Input() version: 'search' | 'footer' = 'footer';

In the component template at the respective spots:

class="some-element {{version}}"

In the css (scss in this case) e.g.:

.some-element {
  &.search {
    background-color: red;
  }

  &.footer {
    background-color: green;
  }
}

How to best do this of course also depends on what needs to be changed (like if it is the whole component or very specific parts of it).

If it is the whole component, you could also simply do <app-search-footer class='search'></app-search-footer>.

There are quite a few ways to accomplish things like this before having to rely on :host ::ngdeep.

What is the best way to reuse styles in ionic?

You can add and use colors in following ways:

1. First add the new color in :root in variables.scss, e.g:

   /** primary green gradient **/
   --ion-color-primary-green-gradient: rgba(80, 158, 47, 0.9);
   --ion-color-primary-green-gradient-rgb: rgba(80, 158, 47, 0.9);
   --ion-color-primary-green-gradient-contrast: 0, 0, 0;
   --ion-color-primary-green-gradient-contrast-rgb: 0, 0, 0;
   --ion-color-primary-green-gradient-shade: 0, 0, 0;
   --ion-color-primary-green-gradient-tint: 0, 0, 0;
   

2. Add then you can use it in .scss file, e.g:

   .view {
       --ion-background-color: var(--ion-color-primary-green-gradient);
   }
   

For font size or other stuffs, you can add variables in global.scss and then use them by importing global.scss file in to scss file of component/page, such as :

1. In global.scss file declare any variable:

   $labelfontsize: 12px;
   

2. Import global.scss file in to scss file of component/page and then use the variable:

Depending on your project structure

  @import "../../../global.scss";
   //or
                
  @import ".../../global.scss";
                
  .label {
      font-size: $labelfontsize;
  }

I want to reuse certain CSS properties in Emotion/styled component

Use css to make a variable of style.

import { css } from 'styled-components'

const reuse = css`
  width: 4rem;
  height: 2.5rem;
  padding: 0 11px;
`

const StyleA = styled.div`
  background-color: black;
  ${reuse}
`

const StyleB = styled.div`
  background-color: red;
  ${reuse}
`

Check this for more information.

How to reuse widget styles properly in flutter?

Flutter style behaves similarly to Vue scoped styled / React "styled-component" or React native in general:

There's no "global style" in these scenarios. Instead, you use composition to obtain the desired result.

In a sense, you have one StatelessWidget for each "CSS class", instead of one big StatelessWidget with many parameters.

For example, say we want to split a "red background + border radius" into reusable styles, then we'd typically have two widgets:

• RedBackground
• MyBorder

where you would then be able to use them independently:

RedBackground(
  child: Text('hello world'),
)

or together:

RedBackground(
  child: MyBorder(
    child: Text('hello world'),
  ),
)

---

Related Topics