Question

我有一个简单的按钮组件

package com.dmelton.classScheduler;

import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.support.v4.app.Fragment;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.Toast;

public class WeekFragment extends Fragment {
View previousView;

    public WeekFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_week, container, false);
    }

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        TableLayout timeTable = getActivity().findViewById(R.id.timeTable);
        int count = timeTable.getChildCount();
        for (int i = 0; i < count; i++) {
            View v = timeTable.getChildAt(i);
            if (v instanceof TableRow) {
                TableRow row = (TableRow) v;
                int rowCount = row.getChildCount();
                for (int r = 0; r < rowCount; r++) {
                    final View v2 = row.getChildAt(r);
                    if (v2 instanceof ImageView) {
                        final ImageView b = (ImageView) v2;

                    b.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            b.setBackground(getResources().getDrawable(R.drawable.cell_highlight));
//Check for the first time for null value
                        if(previousView!=null)previousView.setBackgroundResource(R.drawable.cell_shape);
                        //Removes old view
                        previousView=null;
                        //Assign new view
                        previousView=b;
                        }
                    });
                    }
                }
            }
        }
    }
}

我正在尝试使用锥形渐变应用一些自定义CSS：

  <Button 
    bsStyle={!isClicked ? "default" : "warning"}
    className="plate-well"
    onMouseOver = {this.handleMouseDownOver}
    onMouseDown = {this.handleMouseDownOver}
    style={wellStyle}
  />

当我直接将其包含在样式表中时，效果很好：

const wellStyle = {
  background: "conic-gradient(lime 40%, yellow 0 70%, red 0) !important"
}

但是当我将其作为内联样式包含在组件中时，它不起作用。我想知道为什么我的组件表现出这种行为以及如何通过react修改内联样式？

Answer 1

conic-gradient属性几乎没有在任何浏览器中完全实现（仅从Chrome 69开始）。请检查Implementation。我建议使用Lea Verou's Pollyfill。

内联自定义CSS in react

1 个答案: