Question

我刚刚开始在Angular应用程序中使用Angular Material主题。

我使用了一些单选按钮，但希望对其进行样式设置，以使其比平时更小。我可以设置文本标签的样式，但要努力为实际的按钮本身（圆圈）设置样式。

现在，我有

<mat-radio-group class="smallRadio">
    <mat-radio-button value="1">Option 1</mat-radio-button>
    <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

我应该怎么做？

Answer 1

我认为，这应该足够了：

.mat-radio-container {
    transform: scale(0.85);
}

根据需要选择刻度中的数字。

Answer 2

尝试一下

默认半径为// MARK:- HTML TO STRING func stringFromHtml(string: String) -> NSAttributedString? { do { let data = string.data(using: String.Encoding.utf8, allowLossyConversion: true) if let d = data { let str = try NSAttributedString(data: d, options: [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil) return str } } catch { } return nil }，我们在此处将其设置为20px

10px

Answer 3

请不要在您的项目中使用ViewEncapsulation.None。将来会导致无法预测的行为。当您在一个组件中更改样式时，其他一些组件也可以更改，并且很难找到哪些组件。

如果您想覆盖角形材料的样式，建议您在项目中创建一个单独的* .scss，名称为"material-overrides.scss"，在其中将所有不同组件的样式更改。例如，您的文件可能如下所示

example-component {
    .smallRadio .mat-radio-container{
      height: 10px !important;
      width: 10px !important;
    }
    .smallRadio .mat-radio-outer-circle{
        height: 10px !important;
        width: 10px !important;
    }
    .smallRadio .mat-radio-inner-circle{
        height: 10px !important;
        width: 10px !important;
    }
    .smallRadio .mat-radio-button .mat-radio-ripple{
        height: 20px !important; 
        width: 20px !important; 
        left: calc(50% - 10px) !important; 
        top: calc(50% - 10px) !important; 
    }
}

在我的示例中，请注意!important。这也不是一个好习惯。您需要将其替换为更精确的MDN web docs。

也请不要忘记像这样将创建的material-overrides.scss文件添加到styles.scss：

@import './material-overrides.scss';

您还可以阅读角度材料小组的替代建议-link。

Answer 4

试试这个： 我已经有了一个勾号，改变了 css

[Running] cd "d:\Coding\Dicoding\" && kotlinc a.kt -include-runtime -d a.jar && java -jar a.jar
Java HotSpot(TM) 64-Bit Server VM warning: Options -Xverify:none and -noverify were deprecated in JDK 13 and will likely be removed in a future release.
WARNING: An illegal reflective access operation has occurred
WARNING: Illegal reflective access by com.intellij.util.ReflectionUtil to method java.util.ResourceBundle.setParent(java.util.ResourceBundle)
WARNING: Please consider reporting this to the maintainers of com.intellij.util.ReflectionUtil
WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations
WARNING: All illegal access operations will be denied in a future release
Hello world

[Done] exited with code=0 in 2.976 seconds

角材料中样式单选按钮的样式

4 个答案: