第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何在一個(gè)有角度的組件中處理多個(gè)主題?

如何在一個(gè)有角度的組件中處理多個(gè)主題?

素胚勾勒不出你 2022-08-18 15:57:17
我正在開(kāi)發(fā)一個(gè)Angular 9項(xiàng)目,我正在創(chuàng)建兩個(gè)主題,每個(gè)主題都有自己的css輸出文件。我修改了該文件以處理:angular.json"styles": [  {    "input": "src/styles/themes/light-theme.scss",    "lazy": true,    "bundleName": "light-theme"  },  {    "input": "src/styles/themes/dark-theme.scss",    "lazy": false,    "bundleName": "dark-theme"  }],light-theme并且是我的輸入文件,我正在設(shè)置變量,例如:dark-theme$background色$button色$text色等等,等等。我的問(wèn)題是,我無(wú)法從每個(gè)組件中使用這些變量,因?yàn)槲业慕M件不知道這些變量是什么。我無(wú)法導(dǎo)入一個(gè)或另一個(gè)主題,因?yàn)槲蚁胧褂梦以谳斎胛募新暶鞯闹怠N覒?yīng)該如何處理這個(gè)問(wèn)題?有沒(méi)有辦法“導(dǎo)入”我在angular.json文件上編寫(xiě)的輸入文件?謝謝!
查看完整描述

1 回答

?
精慕HU

TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊

如果在全局樣式中定義了 sass 變量,則在動(dòng)態(tài)更改主題后將無(wú)法訪問(wèn)它們。這是因?yàn)閯?dòng)態(tài)加載的主題將僅包含css規(guī)則,而不是sass;除了在運(yùn)行時(shí),你的組件scss也已經(jīng)編譯成css,所以沒(méi)有更多的sass變量的概念。

你可以做的是使用CSS變量,它們具有良好的瀏覽器支持(除了IE和opera mini)。

例如,您可以在主題文件中定義這些變量

dark-theme.scss

:root{

  --button-background: darkgrey;

  --button-color: white;

}

光主題.scss


:root{

  --button-background: lightgrey;

  --button-color: black;

}

然后在組件中,使用這些變量


component.scss


button

{

  cursor: pointer;

  padding: 10px;

  border: 0;

  color:var(--button-color);

  background-color:var(--button-background);

}

然后,當(dāng)您動(dòng)態(tài)加載淺色主題時(shí),它將覆蓋現(xiàn)有變量。如果您隨后動(dòng)態(tài)刪除 ,它將返回到使用深色主題的變量。light-theme.css


查看完整回答
反對(duì) 回復(fù) 2022-08-18
  • 1 回答
  • 0 關(guān)注
  • 134 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)